【gsap・lenis】慣性スクロール

SITE

install

bun install lenis
or
<script src="https://unpkg.com/lenis@1.3.3/dist/lenis.min.js"></script> 

設定

@import 'lenis/dist/lenis.css';
or
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.3/dist/lenis.css">

gsap-scrolltriggerと一緒に設定する

  //npmの場合
 import Lenis from 'lenis'

  window.addEventListener('DOMContentLoaded', () => {
    const lenis = new Lenis({
      duration: 1.2,
      smooth: true,
      smoothTouch: false,
    });

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

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

    gsap.ticker.lagSmoothing(0);
  });