GSAP ScrollTrigger 完全ガイド — スクロール連動アニメーション
GSAP（GreenSock Animation Platform）は高機能な JavaScript アニメーションライブラリで、プラグイン ScrollTrigger を使えばスクロールに連動した演出を緻密に制御できます。本ガイドでは 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 の利用条件は？
GSAP は広く無償で利用できますが、ライセンス条件は変更されることがあります。商用利用前に公式サイト（gsap.com）で最新の条件を確認してください。
CSS のスクロールアニメ（animation-timeline）との違いは？
CSS の
animation-timeline: scroll() は軽量ですが対応ブラウザがまだ限定的です。GSAP ScrollTrigger は対応範囲が広く、pin・scrub・複雑な連携まで一貫して制御できます。ScrollTrigger が動かないときは？
registerPlugin の呼び忘れ、trigger セレクタの不一致、要素が初期状態で見えてしまっている（FOUC）などが典型です。markers:true で位置を確認しましょう。
SPA でルート遷移するとズレる
遷移後に
ScrollTrigger.refresh() を呼んで位置を再計算してください。関連書籍
PR · Amazon
CSSアニメーション + 高度なテクニック
CSS animation を体系的に学べる定番書。実例多数。
PR · Amazon
Web Designer 必須テクニック
プロのWeb制作で使えるUI/UXとアニメーション解説。
PR · Amazon
Microinteractions（マイクロインタラクション設計）
Dan Saffer著・マイクロインタラクション設計の定番書。
学びを止めない · Amazonサブスク
PR · Amazon
Kindle Unlimited
技術書・デザイン書が読み放題。30日無料体験 →
PR · Amazon
Audible
移動中に耳で学ぶオーディオブック。30日無料体験 →
PR · Amazon
Amazon Prime
Prime Reading・配送特典つき。30日無料体験 →
PR · Amazon
Music Unlimited
作業用BGMに。1億曲が聴き放題・30日無料体験 →
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。