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

SITE

install

//npm
npm install lenis
npm install gsap

設定

gsap-scrolltriggerと一緒に設定する

  //npm
  import Lenis from 'lenis';
  import { gsap } from 'gsap';
  import { ScrollTrigger } from 'gsap/ScrollTrigger';

  //CDN
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://unpkg.com/lenis@1.3.3/dist/lenis.min.js"></script>


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



  gsap.registerPlugin(ScrollTrigger);


  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);
  });