gsap-scrolltrigger-storytelling

GSAP ScrollTrigger によるストーリーテリングスキル

使用する場面

• GSAP ScrollTrigger を使用して、映画のような粘着型のプロダクトストーリーテリング、段階的な UI の表示、スクロールに同期したアニメーション、滑らかな補間、没入感のあるセクション遷移を構築する場合。

ワークフロー

適用範囲

• ページを静的なマーケティングレイアウトではなく、スクロールで展開するプロダクトストーリーのように見せたい場合に適用します。
• GSAP ScrollTrigger を、粘着型セクション、段階的なインターフェース表示、ピン留めされたシーン、スクラブ対応のタイムライン、セクション間の没入感のある遷移を制御する主なレイヤーとして使用します。
• 実際のプロダクトのストーリーとインターフェースの明瞭さを保ちます。モーションは理解を助けるものであり、演出効果の陰に基本的なコンテンツを隠すものであってはなりません。

目指す体験

• スクロールの各区間で、新たなプロダクトの状態、機能レイヤー、データビュー、デバイスフレーム、またはワークフローのステップが表示される、粘着型のプロダクトストーリーテリングを作成します。
• スクロールに同期したアニメーションを使用し、コピー、UI パネル、スクリーンショット、オーバーレイ、背景の雰囲気が、ひとつの設計されたシーケンスとして一緒に動くようにします。
• 段階的な UI 表示を構築します。フレームを描画し、コントロールをフェードインさせ、パネルをスライドさせて配置し、数値をカウントアップし、領域をハイライトし、ユーザーのスクロールに応じて状態を切り替えます。
• ペース配分、明確な演出、奥行き、意図を感じさせる遷移を適切に制御し、全体を映画のようにプレミアムで没入感のある雰囲気に仕上げます。

実装ガイダンス

• メインのスクロールストーリーには scrub を指定した ScrollTrigger 付きの GSAP タイムラインを使用し、補助的な出現アニメーションやホバー時のモーションには通常のトゥイーンのみを使用します。
• 長いストーリーセクションは pin: true でピン留めし、各シーンを明示的なタイムラインラベルに対応づけて、シーケンスを簡単に調整できるようにします。
• レイアウトに影響するプロパティより、transform と opacity によるアニメーションを優先します。will-change は、本当に必要なアニメーション対象に限って控えめに使用します。
• React コンポーネントでは gsap.context() を使用し、アンマウント時にクリーンアップして ScrollTrigger が正しく破棄されるようにします。
• 画像、フォント、または非同期コンテンツの読み込みによってセクションの高さやピン留め位置が変わる場合は、読み込み後に ScrollTrigger を更新します。
• matchMedia() または同等のブレークポイントを使用し、小さい画面ではデスクトップ向けの粘着型演出を無理なく簡略化します。

モーションパターン

• 粘着型プロダクトフレーム：メインの要素をピン留めしたまま、周囲のストーリーを段階的に更新します。
• レイヤー表示：ラベル、オーバーレイ、パネル、プロダクトの状態を、短い間隔を設け、共通のイージングを使ってひとつずつ表示します。
• セクション間の引き継ぎ：現在のシーンを拡大、マスク、ぼかし、または移動させて次のセクションにつなげ、唐突に終わらないようにします。
• 滑らかな補間：ポインター追従やスクロールに反応する細部には、スクラブの平滑化、quickSetter/quickTo、または線形補間した値を使用します。
• 映画のような奥行き：前景と背景の視差、控えめなカメラ移動、暗転レイヤー、マスク、焦点移動を使い、読みやすさを損なわないようにします。

調整項目

• ピン留めの長さ：情報量の多いプロダクトストーリーでは長めにし、シーン内の状態変化がひとつかふたつだけの場合は短めにします。
• スクラブの感触：正確な技術解説には直接的なスクラブを使用し、より映画的なプロダクトフィルムのような演出には、イージングのあるスクラブを使用します。
• 表示の密度：複雑な UI では細かな表示を増やし、コピーで内容を伝える必要があるストーリーセクションでは減らします。
• 遷移の強さ：インパクトの強い遷移はセクション間の引き継ぎに限定し、小さなコンテンツ変更のたびに使わないようにします。

避けること

• 明確なストーリー上の意味がないまま、スクロールのたびに無関係なアニメーションを起動すること。
• 読者を長時間閉じ込めたり、ページが壊れているように感じさせたりする粘着型またはピン留めされたセクションを使うこと。
• transform で対応できる場面で、スクラブするシーンに width、height、top、left などのレイアウトに大きく影響するプロパティをアニメーションさせること。
• 映画的な効果によってテキストのコントラストが低下したり、CTA が隠れたり、そのセクションで説明するプロダクト UI が見えにくくなったりすること。
• コンポーネントのアンマウント後やルート変更後も ScrollTrigger を残すこと。