lenis (smooth scroll)

김종민·2023년 9월 18일

js lenis

라이브러리

목록 보기

5/8

웹사이트 스크롤을 할 때 마우스 휠에 따라 살짝 살짝 끊기는 형태를 많이 보았을 것이다.
이런 부분이 없이 스무스~하게 스크롤이 되도록 하는 라이브러리를 찾아 기록해두려 한다.

위의 이미지와 같이 일반적인 스크롤 할 때의 모습은 이러하다.

하지만!!!

lenis 라이브러리를 사용한다면 아래와 같이 스무스하게 스크롤이 되는것을 볼 수 있다.

✅사용방법

<!--js-->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.22/bundled/lenis.min.js"></script>

const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

Lenis 초기화: new Lenis()로 Lenis 객체를 생성합니다.
스크롤 이벤트: lenis.on('scroll', ...)을 사용하여 스크롤 이벤트를 감지하고, 이를 콘솔에 로그로 출력합니다.
애니메이션 루프: requestAnimationFrame을 사용하여 raf 함수가 계속해서 호출되도록 설정합니다. raf 함수 내에서 lenis.raf(time)을 호출하여 Lenis의 애니메이션을 업데이트합니다. 이 방식은 브라우저의 리프레시 주기에 맞춰 계속해서 실행됩니다.
효율적 애니메이션: requestAnimationFrame을 사용하여 화면 갱신과 동기화되어 성능을 최적화합니다.

<!--gsap-->
const lenis = new Lenis()

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

gsap.ticker.lagSmoothing(0)

Lenis 초기화: 첫 번째 코드와 동일하게 new Lenis()로 Lenis 객체를 생성합니다.
스크롤 이벤트: lenis.on('scroll', ScrollTrigger.update)를 사용하여 Lenis의 스크롤 이벤트가 발생할 때마다 GSAP의 ScrollTrigger.update를 호출합니다. 이 코드는 GSAP의 ScrollTrigger 플러그인과 연동되어 스크롤을 제어하는 데 사용됩니다.
GSAP ticker: gsap.ticker.add()를 사용하여 매 프레임마다 lenis.raf(time 1000)을 호출합니다. 여기서 time 1000은 GSAP의 시간 값을 Lenis의 raf 메서드에 전달하는 방식입니다.
lagSmoothing(0): gsap.ticker.lagSmoothing(0)은 GSAP의 ticker에서 프레임 간의 지연을 최소화하여 애니메이션이 더 부드럽게 진행되도록 합니다.

첫 번째 코드는 Lenis만을 사용하여 부드러운 스크롤링을 구현하고, requestAnimationFrame을 사용해 애니메이션 루프를 직접 관리합니다.
두 번째 코드는 GSAP의 ticker를 사용하여 애니메이션 루프를 관리하고, ScrollTrigger와 연동하여 스크롤 이벤트를 처리합니다. GSAP과 Lenis를 함께 사용해 좀 더 고급 기능을 활용할 수 있습니다.

위의 cdn을 html파일에 넣어주고!
아래 js를 복붙해주면 간단하게 사용할 수 있다!

❗문제점 발견 및 수정

페이지 창 온로드시 로딩창을 구현을 했는데,
lenis를 사용하게 된다면 오버플로우 기능이 먹통이 되는 것을 발견하였다!
이때 해결 방안을 찾게되었는데 이 두개면 해결이 된다!

lenis.stop();

lenis.start();

위의 예시중 gsap을 사용한 개인 프로젝트 코드로 수정을 해보겠습니다.

<!--gsap-->
const lenis = new Lenis()

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

gsap.ticker.lagSmoothing(0)

✅lenis.stop();



$(document).ready(function() {
  let progress = $('.progress'); // progress 요소 선택
  let inputs = $(".progress-container").find("label");
  inputs.each(function(index) {
    let time = (inputs.length - index) * 100;
    $(this).css("-webkit-animation", "anim 3s " + time + "ms infinite ease-in-out");
    $(this).css("animation", "anim 3s " + time + "ms infinite ease-in-out");
  });
  setTimeout(function() {
    progress.slideUp(500, function() {
      setTimeout(animateOnLoad, 500);
      
      ✅lenis.start();
    
    });
  }, 100); 
});

페이지 창 온로드시 로딩창일 때는 lenis를 작동하지 않도록 lenis.stop();을 하고,
로딩창이 끝나는 setTimeout 끝 무렵에 lenis.start();을 해주게 되면 이러한 문제점을 해결할 수 있었다.

추가로 알아두기

<script>
 history.scrollRestoration = "manual"
</script>

history.scrollRestoration = "manual"는 브라우저의 스크롤 복원 동작을 제어하는 속성입니다.
기본적으로, 브라우저는 페이지를 새로 고침하거나 뒤로 가기/앞으로 가기를 할 때, 사용자가 마지막으로 페이지에서 위치한 스크롤 위치를 자동으로 복원하려고 합니다.
그러나 scrollRestoration을 "manual"로 설정하면,
이 자동 복원 동작을 끄고 개발자가 스크롤 복원을 수동으로 처리하도록 할 수 있습니다.

//예시사용

<script>
 // 페이지가 로드될 때, 스크롤 위치를 수동으로 처리하고 싶을 때 사용
history.scrollRestoration = "manual";

// 예를 들어, 페이지 로드 후 특정 위치로 스크롤
window.scrollTo(0, 0);
</script>