gsap-router

GSAP ルーター

アニメーションの要件に基づいて、4 つの専門スキルにルーティングします。

ルーティングプロトコル

1. 分類 — ユーザーのリクエストからアニメーションの種類を特定します
2. 照合 — 以下のシグナル照合ルールを適用します
3. 組み合わせ — 本番環境向けのアニメーションでは、多くの場合 2〜3 個のスキルを組み合わせる必要があります
4. 読み込み — 実装前に、照合された SKILL.md ファイルを読みます

クイックルート

Tier 1：コア（ここから開始）

要件	スキル	シグナル
基本的なアニメーション、イージング	gsap-fundamentals	tween, animate, ease, from, to, duration, delay
複雑なシーケンス	gsap-sequencing	timeline, sequence, orchestrate, labels, callbacks
スクロールアニメーション	gsap-scrolltrigger	scroll, pin, scrub, parallax, reveal, sticky
React との統合	gsap-react	React, useGSAP, ref, hook, cleanup, context

シグナル照合

主なシグナル

gsap-fundamentals:

• "animate", "tween", "transition"
• "ease", "easing", "timing"
• "from", "to", "fromTo"
• "duration", "delay", "repeat"
• "stagger", "properties"

gsap-sequencing:

• "timeline", "sequence", "orchestrate"
• "labels", "callbacks", "nested"
• "position parameter", "overlap"
• "complex animation", "choreography"
• "play", "pause", "reverse", "seek"

gsap-scrolltrigger:

• "scroll", "ScrollTrigger"
• "pin", "sticky", "fixed"
• "scrub", "parallax"
• "reveal on scroll", "snap"
• "progress indicator"

gsap-react:

• "React", "component"
• "useGSAP", "useRef", "hook"
• "cleanup", "context"
• "event handler", "state"

信頼度スコア

• 高（シグナル 3 つ以上） — 一致したスキルに直接ルーティングします
• 中（シグナル 1〜2 つ） — 基礎として fundamentals を加えてルーティングします
• 低（シグナル 0 個） — gsap-fundamentals から開始します

よくある組み合わせ

基本的なアニメーション（スキル 1 つ）

gsap-fundamentals → Tweens, easing, basic properties

React コンポーネントのアニメーション（スキル 2 つ）

gsap-fundamentals → Animation principles, easing
gsap-react → Hook patterns, cleanup, refs

スクロールベースのエクスペリエンス（スキル 3 つ）

gsap-scrolltrigger → Scroll triggers, pinning
gsap-sequencing → Timeline for pinned sections
gsap-fundamentals → Individual animations

本番環境向け（スキル 3〜4 つ）

gsap-fundamentals → Core animations
gsap-sequencing → Complex orchestration
gsap-react → Framework integration
gsap-scrolltrigger → Scroll interactions (if needed)

判定表

フレームワーク	アニメーションの種類	複雑さ	ルーティング先
Vanilla JS	シンプル	低	fundamentals
Vanilla JS	シーケンス	中	fundamentals + sequencing
Vanilla JS	スクロールベース	中	fundamentals + scrolltrigger
React	シンプル	低	fundamentals + react
React	複雑	高	4 つすべてのスキル
React	スクロール	中	react + scrolltrigger

アニメーションのカテゴリ

モーションの種類 → スキルの対応

アニメーションの種類	主なスキル	補助スキル
フェードイン／アウト	gsap-fundamentals	-
スライド／移動	gsap-fundamentals	-
拡大・縮小／回転	gsap-fundamentals	-
スタガー	gsap-fundamentals	-
ページ遷移	gsap-sequencing	fundamentals
オーケストレーションされた表示	gsap-sequencing	fundamentals
スクロール時の表示	gsap-scrolltrigger	fundamentals
パララックス	gsap-scrolltrigger	-
ピン留めされたセクション	gsap-scrolltrigger	sequencing
React アニメーション	gsap-react	fundamentals
React + スクロール	gsap-react	scrolltrigger

他のドメインとの統合

R3F（r3f-*）との連携

r3f-fundamentals → 3D scene setup
gsap-fundamentals → Object property animation
gsap-sequencing → Camera movements, scene transitions

GSAP は onUpdate を介して Three.js オブジェクトのプロパティをアニメーションさせます。

ポストプロセッシング（postfx-*）との連携

postfx-composer → Effect setup
gsap-fundamentals → Animate effect parameters
gsap-sequencing → Transition between effect states

GSAP はエフェクトの強度や色などを制御します。

オーディオ（audio-*）との連携

audio-playback → Music timing
gsap-sequencing → Sync animations to audio cues
gsap-fundamentals → Audio-reactive property changes

タイムラインのコールバックをオーディオイベントと同期させます。

パーティクル（particles-*）との連携

particles-systems → Particle emitters
gsap-fundamentals → Animate emitter properties
gsap-sequencing → Particle burst sequences

ワークフローパターン

ページ読み込み時のアニメーション

1. gsap-fundamentals → Understand tweens, easing
2. gsap-sequencing → Build entrance timeline
3. gsap-react → Integrate with React (if applicable)

スクロールエクスペリエンス

1. gsap-scrolltrigger → Set up triggers, pins
2. gsap-sequencing → Build scrubbed timelines
3. gsap-fundamentals → Individual animation properties

インタラクティブ UI

1. gsap-fundamentals → Hover, click animations
2. gsap-react → Event handlers, cleanup
3. gsap-sequencing → Complex interaction sequences

時間的崩壊スタック

新年カウントダウンプロジェクト向け：

gsap-fundamentals → Digit animations, pulse effects, easing
gsap-sequencing → Countdown sequence, final moment orchestration
gsap-react → Component integration, cleanup

主なアニメーション：

• 時刻の変化に合わせた数字のフリップ
• 時間経過に伴うパルス／グローの強度変化
• カウントダウン終了直前のドラマチックなシーケンス
• ゼロになったときの祝賀演出

クイックリファレンス

タスク → スキル

タスク	主なスキル	副次スキル
「この要素をアニメーションさせる」	fundamentals	-
「入場アニメーションを作成する」	fundamentals	react
「ページ遷移を構築する」	sequencing	fundamentals
「スクロールに連動してアニメーションさせる」	scrolltrigger	fundamentals
「React コンポーネントのアニメーション」	react	fundamentals
「ピン留めされたスクロールセクション」	scrolltrigger	sequencing
「複雑なアニメーションシーケンス」	sequencing	fundamentals
「リスト項目を順番にずらしてアニメーションさせる」	fundamentals	react

イージング早見表

印象	イージング
キビキビした UI	power2.out
滑らかな入場	power3.out
遊び心のあるバウンス	back.out(1.7)
バネのような動き	elastic.out
ボールの落下	bounce.out
線形／機械的	none

フォールバックの動作

• フレームワークが指定されていない場合 → バニラ JS を想定し、gsap-fundamentals から始めます
• React が指定されている場合 → 組み合わせに gsap-react を追加します
• スクロールが指定されている場合 → gsap-scrolltrigger を追加します
• 「複雑」または「シーケンス」が指定されている場合 → gsap-sequencing を追加します
• 要件が不明確な場合 → gsap-fundamentals から始めます

パフォーマンスの優先順位

パフォーマンスが重要な場合：

1. gsap-fundamentals — トランスフォームを使用し、レイアウトプロパティを避けます
2. gsap-react — 適切にクリーンアップすることでメモリリークを防ぎます
3. gsap-scrolltrigger — scrub を適切に使い、更新をまとめます
4. gsap-sequencing — タイムラインを再利用し、作り直さないようにします