GSAP ScrollTrigger 完全ガイド — スクロール連動アニメーション
セットアップと基本
GSAP と ScrollTrigger を読み込み、gsap.registerPlugin(ScrollTrigger) を一度呼びます。あとは tween に scrollTrigger オプションを渡すだけ。
例: gsap.to('.box', { y: 0, opacity: 1, scrollTrigger: { trigger: '.box', start: 'top 85%' } }) で、要素がビューポート85%に入ったらフェードイン。
実装デモ：GSAP Scroll Reveal
start / end — トリガー位置の指定
start: 'top 85%' は「対象の上端がビューポートの85%位置に来たら」という意味です。end: 'bottom top' と組み合わせて区間を定義します。
markers: true を付けると開始/終了位置が画面に可視化され、デバッグが一気に楽になります。
scrub — スクロール量にアニメを直結
scrub: true を付けると、アニメーションの進行がスクロール位置に直結します。スクロールを戻せばアニメも巻き戻り、視差（パララックス）やプログレス表現に最適。
実装デモ：GSAP Parallax Scroll
pin — 要素を固定して魅せる
pin: true は対象をスクロール中に画面に固定します。固定したまま中身を切り替える「ストーリーテリング」型のセクションが作れます。
横スクロールギャラリーや段階的な解説セクションで多用されます。
stagger と数値カウント
stagger で複数要素を時間差アニメーション、onUpdate でダミー値を tween して数値カウントアップも実装できます。
FAQ
GSAP の利用条件は？
CSS のスクロールアニメ（animation-timeline）との違いは？
animation-timeline: scroll() は軽量ですが対応ブラウザがまだ限定的です。GSAP ScrollTrigger は対応範囲が広く、pin・scrub・複雑な連携まで一貫して制御できます。ScrollTrigger が動かないときは？
SPA でルート遷移するとズレる
ScrollTrigger.refresh() を呼んで位置を再計算してください。関連書籍
学びを止めない · Amazonサブスク
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。