GSAP

GSAP ScrollTrigger 完全ガイド — スクロール連動アニメーション

Q: CSS のスクロールアニメ（animation-timeline）との違いは？

CSS の animation-timeline: scroll() は軽量で Chrome/Edge・Safari が対応済み（Firefox は 159 以降）ですが、古いブラウザでは動きません。GSAP ScrollTrigger は対応範囲が広く、pin・scrub・複雑な連携まで一貫して制御できます。

Q: SPA でルート遷移するとズレる

遷移後に ScrollTrigger.refresh() を呼んで位置を再計算してください。

2026-06-03 公開 · Motion Lab

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 して数値カウントアップも実装できます。

実装デモ：GSAP Text Stagger、GSAP Counter

FAQ

GSAP の利用条件は？

GSAP は 2025年4月の v3.13 から、SplitText など旧 Club GSAP 限定だったプラグインも含めて全体が無料になり、商用利用も可能です。ライセンス条件は変わることがあるため、最新の条件は公式サイト（gsap.com）で確認してください。

CSS のスクロールアニメ（animation-timeline）との違いは？

CSS の animation-timeline: scroll() は軽量で Chrome/Edge・Safari が対応済み（Firefox は 159 以降）ですが、古いブラウザでは動きません。GSAP ScrollTrigger は対応範囲が広く、pin・scrub・複雑な連携まで一貫して制御できます。

ScrollTrigger が動かないときは？

registerPlugin の呼び忘れ、trigger セレクタの不一致、要素が初期状態で見えてしまっている（FOUC）などが典型です。markers:true で位置を確認しましょう。

SPA でルート遷移するとズレる

遷移後に ScrollTrigger.refresh() を呼んで位置を再計算してください。