しらべものドット宇宙HTMLコーダーが必死こいて〇〇〇を目指すブログ

GSAPの慣性スクロールを実装する

参考サイト

ScrollSmoother
https://greensock.com/docs/v3/Plugins/ScrollSmoother

GSAPの慣性スクロールライブラリ「ScrollSmoother」の使い方を紹介
https://liginc.co.jp/595306

ScrollSmoother | GSAP
https://greensock.com/docs/v3/Plugins/ScrollSmoother

  1. ScrollSmoother.min.js を読み込む。
  2. 起動するjs内でScrollSmootherの利用を登録する。
    gsap.registerPlugin(ScrollSmoother);
  3. 起動したjs内でScrollSmootherを生成する。
    let smoother = ScrollSmoother.create({
    smooth: 1,
    effects: true,
    smoothTouch: 0.1,
    });
  4. html内に#smooth-wrapperと#smooth-contentを用意し、ページ内のコンテンツをその要素の中に収める。

// ここに任意のコンテンツ

  1. 出来上がり

※ position:fixed な要素(ヘッダーやトップへ戻る 等)は、#smooth-wrapper の外に出しておく。

※ ScrollSmootherを使う時、高さが変わるような処理や、ページ内リンクのスクロールは、GSAP製スクロールにしておいた方がいい。

※ GSAP ScrollSmoother は、垂直スクロール専用につくられている。

※ GSAP ScrollSmoother は、ページ全体に適用するため、個別の要素に対しては適用できない。

ScrollSmoother は、常に1つしか存在できない。新しいインスタンスが生成されると、既存のインスタンスが削除される。既存インスタンスへアクセスするには、.get()メソッドを使用する。