スキル自身の言葉で
ScrollTrigger は GSAP のスクール連動アニメーション用プラグインです。スクロール位置で tween やタイムラインを発火させたり、セクションをピン留めしたり、進行状況をスクロールにスクラブさせたり、start/end の範囲でタイムラインを進行させたりします。
trigger、clamp() や相対値を含む start/end、endTrigger、scrub、toggleActions、pin と pinSpacing、snap、scroller、id、refreshPriority といった設定用語を網羅的に整理し、さらに、揃って表示されるスタガー式リビール用の ScrollTrigger.batch()、サードパーティのスムーススクローラー用の scrollerProxy()、疑似的な横スクロール用の containerAnimation を追加しています。各オプションのデフォルト値が明記されており、ベストプラクティスのチェックリストと、React のクリーンアップ、リフレッシュの順序、イース、残存マーカーに関する明確な Do Not リストも含まれます。
生成されるもの
- トリガーの start から end までの範囲を通じて、進行状況がスクロール位置に連動する tween またはタイムラインです。
- 連動する tween を持たずに作成されるスタンドアロンの ScrollTrigger で、self.progress から UI を更新するようなカスタム動作のためにコールバックとともに使用されます。
- ScrollTrigger.batch() によって返される、バッチ対象ごとに1つの ScrollTrigger インスタンスの配列です。
- containerAnimationトゥイーンが生み出す水平方向の移動に基づいて発火するネストされたトゥイーンです。
仕組み
- 01プラグインを一度だけ登録する
ScrollTriggerはコアアニメーションAPIの一部ではなくプラグインとして提供されるため、スクリプト読み込み後、scrollTriggerの設定が実行される前に一度だけ登録します。
- 02scrollTrigger設定を紐付ける
トゥイーンまたはタイムラインには、トリガー要素と、トリガー位置とビューポート位置の関係を表すstartおよびendを指定するscrollTriggerオブジェクトを与えます。
- 03スクロールがプレイヘッドをどう駆動するかを選ぶ
scrubはスクロール位置に進行状況を連続的にリンクさせます（数値による追従の遅延を指定することもできます）。一方toggleActionsは4つの通過点で個別のplay/reverseアクションを発火させます。
- 04セクションをピン留めしてタイムラインをscrubする
ピン留めは範囲が有効な間トリガー要素を固定し、そのScrollTriggerに紐付けられたタイムラインは同じstartからendの区間にわたって子要素を進行させます。
- 05同時に到着する要素をバッチ処理する
ScrollTrigger.batch()はターゲットごとに1つのScrollTriggerを作成し、そのコールバックを短い間隔でまとめることで、ほぼ同時に登場する要素を1回の呼び出しでstaggerを付けてアニメーションできます。
- 06コンテンツが消えたらインスタンスを破棄する
アニメーション対象の要素を削除する場合やページを切り替える場合（単一ページアプリケーションなど）は、古い要素に対して動作を続けないように、関連するインスタンスをkillする必要があります。