参考サイト
ScrollSmoother
https://greensock.com/docs/v3/Plugins/ScrollSmoother
GSAPの慣性スクロールライブラリ「ScrollSmoother」の使い方を紹介
https://liginc.co.jp/595306
ScrollSmoother | GSAP
https://greensock.com/docs/v3/Plugins/ScrollSmoother
- ScrollSmoother.min.js を読み込む。
- 起動するjs内でScrollSmootherの利用を登録する。
gsap.registerPlugin(ScrollSmoother); - 起動したjs内でScrollSmootherを生成する。
let smoother = ScrollSmoother.create({
smooth: 1,
effects: true,
smoothTouch: 0.1,
}); - html内に#smooth-wrapperと#smooth-contentを用意し、ページ内のコンテンツをその要素の中に収める。
// ここに任意のコンテンツ
- 出来上がり
※ position:fixed な要素(ヘッダーやトップへ戻る 等)は、#smooth-wrapper の外に出しておく。
※ ScrollSmootherを使う時、高さが変わるような処理や、ページ内リンクのスクロールは、GSAP製スクロールにしておいた方がいい。
※ GSAP ScrollSmoother は、垂直スクロール専用につくられている。
※ GSAP ScrollSmoother は、ページ全体に適用するため、個別の要素に対しては適用できない。
ScrollSmoother は、常に1つしか存在できない。新しいインスタンスが生成されると、既存のインスタンスが削除される。既存インスタンスへアクセスするには、.get()メソッドを使用する。