スクロールで物語る（Scroll Storytelling）
このページでは、GSAPのScrollTriggerで実装するscrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なアニメーションパターンをデモとコードで確認できます。
このページはGSAP（ScrollTrigger）専用です。scrub・pin・ピン留めコンテンツ切り替え・横スクロール変換などの高度なスクロール演出は、GSAPのScrollTriggerでしか実現が難しい実装です。 通常のスクロール連動アニメーション（フェードイン・スライドイン）は スクロールで見せる（Scroll Reveal） も参照してください。
GSAP ScrollTrigger
↓ 下にスクロールして6つのデモを体験してください。各セクションのコードは下部で確認できます。
読み込み中...
各デモのコード解説
各デモをクリックして実装コードを確認してください。すべてのデモは useGSAP({ scope: containerRef }) でスコープを設定し、アンマウント時に自動クリーンアップされます。
GSAP ScrollTrigger のポイント
- •
gsap.registerPlugin(ScrollTrigger, useGSAP)はコンポーネント外（モジュールレベル）で一度だけ呼ぶ - •
scrub: trueはスクロールに即時追従。scrub: 1は1秒の遅延でなめらかに追従 - •
pin: trueでセクションをピン留め。スクロールしても要素が固定され、endに到達すると解除 - •
start / endは"top top"のように「要素の位置 ビューポートの位置」で指定。"+= 400"はピクセル数での相対指定 - •
useGSAP({ scope: containerRef } )でクリーンアップを自動化。アンマウント時にScrollTriggerも破棄される - •
autoAlphaは GSAP 独自のプロパティでopacityとvisibilityを連動させる
💡 上記のデモは、React / Next.jsです。Next.jsの基本セットアップは 公式ドキュメントを参照してください。
同じカテゴリの他のページ
文字を演出する（Text Animation）| UI Memo
GSAPのSplitText・ScrambleTextで実装する文字アニメーションのサンプル。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合など、テキスト演出のUIパターン実例集。
動きの質感を選ぶ（Easing）
イージングの違いを体験で比較。power・back・bounce・elasticなどGSAP・Framer Motion・CSS Transitionのeaseを一覧・比較できるUIパターン実例集。
スクロールで見せる（Scroll Reveal）
スクロールで見せるアニメーションのサンプル。whileInView・IntersectionObserverを使ったUIパターン実例集。Framer MotionとIntersection Observer APIで実装比較。
Zenn