#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の位置に来た時に固定解除するという意味です。

#参考サイト
https://ics.media/entry/210426/