Lenis = 스크롤을 부드럽게 만드는 도구

GSAP = 요소를 애니메이션 시키는 도구

Lenis

브라우저의 기본 스크롤은 뚝뚝 끊기는 느낌이 있다. 마우스 휠을 굴리면 즉각적으로 점프하기 때문이다. Lenis는 그 스크롤 이벤트를 가로채서 lerp(선형 보간)값으로 관성을 붙여준다. 실제로 스크롤 포지션을 직접 제어 한다.

const lenis = new Lenis({lerp: 0.08});
// lerp가 낮을수록 더 느리고 찰진 느낌

GSAP

DOM요소의 CSS 속성(position, opacity, transform)을 시간에 따라 보간해주는 애니메이션 엔진. 스크롤과는 본래 관계가 없고, 타임라인과 easing으로 요소를 움직이는게 핵심이다. ScrollTrigger는 그 애니메이션의 트리거를 스크롤 위치에 연결해주는 플러그인이다.

gsap.to('box', {x: 200, opacity: 1, duration: 0.8, ease: 'power3.out'})

같이 쓰는 이유

문제는 Lenis가 스크롤을 가짜로 만들어버리기 때문에, GSAP의 ScrollTrigger가 실제 스크롤 위치를 놓치게 된다. 그래서 동기화가 필요하다.

// Lenis가 스크롤할 때마다 ScrollTrigger에 알려줌
lenis.on('scroll', ScrollTrigger.update);

// GSAP 타이머로 Lenis를 구동 (브라우저  requestAnimationFrame 대신)
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0); // 탭 전환 후 튐 방지

왼쪽(Lenis)은 lerp: 0.08이 스크롤 값 자체를 보간하기 때문에 손가락을 멈춰도 blob이 관성처럼 살짝 더 흘러가고, 오른쪽(GSAP only)은 스크롤을 멈추는 순간 blob도 즉시 멈춘다.

그 외 Lenis 기능은 여기서..

https://www.lenis.dev/
https://github.com/darkroomengineering/lenis

See the Pen Lenis by GiGi (@PPGcodepen) on CodePen.