ScrollTriggerとは
GSAP(GreenSock Animation Platform)から、2020年5月にリリースされた、「スクロールアニメーション」のためのプラグインであり、とても簡単な記述によって複雑なスクロールアニメーションを実現することができます。
昨今、様々なスクロールアニメーションのためのライブラリやAPIが使用されていますが、その中でも一線を画する機能を備えています。
主な特徴として以下が上げられると思います。
- アニメーションを特定の要素にリンクさせることができる
- マーカーによってデバックや作成が容易
- スクロールにリンクした動きを簡単に作成できる
- 特定のスクロール位置の間で要素を固定できるピン留め機能
- コールバックの充実
実装方法
html
<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js"></script>
まずは上記のコードを埋め込みます。
jQueryは不要です。
js
ScrollTrigger.create({
trigger: ".pagenav",
start: "top 120",
endTrigger: ".footer",
end: "bottom top",
pin: true,
pinSpacing: false,
});
使い方
開始
trigger はアニメションを開始する時の基準とする要素のクラスです。
start はtrigger要素の位置を設定します。
start: "top 120", → triggerのtopがウィンドウの上から120pxの位置に来た時に固定するという意味です。
終了
endTrigger はアニメションを終了する時の基準とする要素のクラスです。
endはendTrigger要素の位置を設定します。
end: "bottom top", → endTriggerのbottomがウィンドウのtopの位置に来た時に固定解除するという意味です。