momentum-parallax

GSAP+Smooth Scrollbarで実現した慣性パララックスのスクロールモジュールです。

1. 利用方法

style-loader css-loader が必要

npm install style-loader css-loader --save

webpack.config.js： /.scss$/　→ /.(scss|css)$/　に変更

pug：

    .MomentumParallax-scrollarea
      .MomentumParallax-scroller
        //- コンテンツ

初期設定

    import { MomentumParallax, gsap, ScrollTrigger } from "momentum-parallax";
    var scrollbar = new MomentumParallax(
      document.querySelector(".MomentumParallax-scrollarea"),
      {
        damping: 0.1,
        delegateTo: document.querySelector(".MomentumParallax-scrollarea"),
        overscrollDamping: 1,
        proxyElem: ".MomentumParallax-scroller",
      }
    );

GSAP scrolltrigger

    let tl = gsap.timeline({
        scrollTrigger: {
        trigger: "トリーガー要素",
        scroller: ".MomentumParallax-scroller",
        start: "top center",
        end: "bottom top",
        markers: false,
        scrub: 0.7,
        pin: false,
        pinSpacing: false,
        invalidateOnRefresh: true
        },
    });

    tl.fromTo(
      "アニメーションターゲット要素",
      {
        opacity: 1,
      },
      {
        opacity: 0,
        duration: 1,
      },
      0
    );

Smooth ScrollbarのAPIも利用可能

    document.querySelector(".btn").addEventListener("click", function () {
      scrollbar.scrollobj.scrollIntoView(
        document.querySelector("#trigger-div"),
        {
          alignToTop: true,
          onlyScrollIfNeeded: false,
        }
      );
    });