GSAP の ScrollTrigger を fullpage.js みたいに使うメモ

ホイールの動きにすぐ反応してほしい

GSAP の ScrollTriggr で fullpage.js みたいに全画面でセクションごとに一気にスクロールさせるには snapを使う方法がありますが、 ScrollTriggr だと画面半分までスクロールしないと次セクションまでのスクロールが発動しないので、 fullpage.js のようにマウスのホイールを少し動かしただけで次セクションまでのスクロールが発動するようにする方法のメモです。

HTML

<section  class="panel">
 <p>Panel1</p>
</section>
<section  class="panel">
 <p>Panel2</p>
</section>
<section  class="panel">
 <p>Panel3</p>
</section>
<section  class="panel">
 <p>Panel4</p>
</section>

SCSS

.panel{
  display: block;
  height: 100vh;
  width:  100%;
}

JavaScript

	import gsap from "gsap";
	import { ScrollTrigger, ScrollToPlugin } from "gsap/all";
	gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);


    const panels = document.querySelectorAll(".panel");

    function goToPanel(panel) {
      gsap.to(window, {
        scrollTo: { y: panel, autoKill: false },
        duration: 1.5,
      });
    }
    panels.forEach((panel) => {
      ScrollTrigger.create({
        trigger: panel,
        end: "bottom top+=1",
        markers: 1,
        onEnter: () => goToPanel(panel),
        onEnterBack: () => goToPanel(panel),
      });
    });
    ScrollTrigger.addEventListener("scrollEnd", () => console.log("scrollEnd"));

実装デモ

See the Pen rNyoRbN by Taro (@TaroTsujimoto) on CodePen.