부드러운 스크롤 구현: Lenis와 GSAP ScrollTrigger 연동

🌊 부드러운 휠 스무딩(Smooth Scrolling)

네이티브 휠 스크롤은 뚝뚝 끊기는 느낌이 강합니다. 현대 웹에서는 Lenis 같은 스무스 스크롤 라이브러리를 적용하여 마우스 휠에 관성을 부여합니다.

Lenis 스크롤이 움직일 때마다 GSAP의 ScrollTrigger.update()를 호출하고, GSAP의 ticker에 Lenis 렌더링 루프를 연동해주면 스크롤 바운싱 없이 완벽하게 부드러운 스크럽 애니메이션이 완성됩니다.

<!-- Lenis + GSAP -->
<script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<script>
// 1. Lenis 초기화
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
})

// 2. Lenis 스크롤 시 ScrollTrigger 업데이트 동기화
lenis.on('scroll', ScrollTrigger.update)

// 3. GSAP Ticker에 Lenis 연결
gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})
gsap.ticker.lagSmoothing(0)

// 이후 평소처럼 ScrollTrigger 작성
</script>