lenis 부드러운 스크롤 효과

패럴랙스 이펙트하면 가장 기본적인 것은 아마 스크롤의 감도? 아닐까 생각이 든다.

스크롤 움직이는 느낌에 따라 사이트의 퀄을 좌우할 수 있달까!?

 

난 그렇게 생각한다.

 

아무튼 가장 많이 쓰는 플러그인은 lenis 아닐까 싶다.

Lenis (smooth scroll)

lenis 공식 사이트

https://lenis.darkroom.engineering/

Lenis – Get smooth or die trying

 

깃허브

https://github.com/darkroomengineering/lenis

GitHub - darkroomengineering/lenis: How smooth scroll should be

 

 

사용법

스크립트 추가

<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/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)

 

스크립트에 이걸 넣어주기만 하면 된다.

하지만 여기서 난 좀 더 묵직한? 스크롤 느낌을 주기 위해 duration과 easing을 설정했다.

이런식으로 적용시키면 더 부드럽고 묵직한 느낌을 얻을 수 있다.

const lenis = new Lenis({
  // 추가된 부분
  duration: 2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
});

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

 

 

근데 문제는... lenis를 쓰다보니 body에 overflow 속성이 안 먹는다는 것..!

무슨 소리냐면 

 

메인페이지에서 로딩이 다 끝나고 스크롤 할 수 있도록

스크립트로 스크롤 방지를 먹일려했으나 안 먹는 에러가 있었다.

 

그래서 찾아보니 lenis.start(), lenis.stop()이라는 메서드가 있었다.

 

스크롤 방지

lenis.stop();

 

이렇게 스크롤 방지를 해놓은 상태에서..

 

스크롤 활성화

setTimeout(() => {
    let tl = gsap.timeline({
      onComplete: function () {
        lenis.start();
      },
    });
    
    // 각종 애니메이션 효과들.. 
  }, 1000);

 

tl이라는 gsap 애니메이션이 끝나면 lenis.start()를 콜백으로 불러오는 것이다!

그럼 메인 인트로 애니메이션이 끝나고 스크롤이 다시 정상 작동되는 것을 확인할 수 있다.

 

코드펜 예제

 

 

메인 인트로가 중요한 페이지에서 써먹으면 좋을 듯 싶다!