GSAP Router
Routes to 4 specialized skills based on animation requirements.
Routing Protocol
- Classify — Identify animation type from user request
- Match — Apply signal matching rules below
- Combine — Production animations often need 2-3 skills together
- Load — Read matched SKILL.md files before implementation
Quick Route
Tier 1: Core (Start Here)
| Need |
Skill |
Signals |
| Basic animations, easing |
gsap-fundamentals |
tween, animate, ease, from, to, duration, delay |
| Complex sequences |
gsap-sequencing |
timeline, sequence, orchestrate, labels, callbacks |
| Scroll animations |
gsap-scrolltrigger |
scroll, pin, scrub, parallax, reveal, sticky |
| React integration |
gsap-react |
React, useGSAP, ref, hook, cleanup, context |
Signal Matching
Primary Signals
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"
Confidence Scoring
- High (3+ signals) — Route directly to matched skill
- Medium (1-2 signals) — Route with fundamentals as foundation
- Low (0 signals) — Start with
gsap-fundamentals
Common Combinations
Basic Animation (1 skill)
gsap-fundamentals → Tweens, easing, basic properties
React Component Animation (2 skills)
gsap-fundamentals → Animation principles, easing
gsap-react → Hook patterns, cleanup, refs
Scroll-Based Experience (3 skills)
gsap-scrolltrigger → Scroll triggers, pinning
gsap-sequencing → Timeline for pinned sections
gsap-fundamentals → Individual animations
Full Production (3-4 skills)
gsap-fundamentals → Core animations
gsap-sequencing → Complex orchestration
gsap-react → Framework integration
gsap-scrolltrigger → Scroll interactions (if needed)
Decision Table
| Framework |
Animation Type |
Complexity |
Route To |
| Vanilla JS |
Simple |
Low |
fundamentals |
| Vanilla JS |
Sequenced |
Medium |
fundamentals + sequencing |
| Vanilla JS |
Scroll-based |
Medium |
fundamentals + scrolltrigger |
| React |
Simple |
Low |
fundamentals + react |
| React |
Complex |
High |
All four skills |
| React |
Scroll |
Medium |
react + scrolltrigger |
Animation Categories
Motion Type → Skill Mapping
| Animation Type |
Primary Skill |
Supporting Skill |
| Fade in/out |
gsap-fundamentals |
- |
| Slide/move |
gsap-fundamentals |
- |
| Scale/rotate |
gsap-fundamentals |
- |
| Stagger |
gsap-fundamentals |
- |
| Page transitions |
gsap-sequencing |
fundamentals |
| Orchestrated reveals |
gsap-sequencing |
fundamentals |
| Scroll reveals |
gsap-scrolltrigger |
fundamentals |
| Parallax |
gsap-scrolltrigger |
- |
| Pinned sections |
gsap-scrolltrigger |
sequencing |
| React animations |
gsap-react |
fundamentals |
| React + scroll |
gsap-react |
scrolltrigger |
Integration with Other Domains
With R3F (r3f-*)
r3f-fundamentals → 3D scene setup
gsap-fundamentals → Object property animation
gsap-sequencing → Camera movements, scene transitions
GSAP animates Three.js object properties via onUpdate.
With Post-Processing (postfx-*)
postfx-composer → Effect setup
gsap-fundamentals → Animate effect parameters
gsap-sequencing → Transition between effect states
GSAP drives effect intensity, colors, etc.
With Audio (audio-*)
audio-playback → Music timing
gsap-sequencing → Sync animations to audio cues
gsap-fundamentals → Audio-reactive property changes
Timeline callbacks sync with audio events.
With Particles (particles-*)
particles-systems → Particle emitters
gsap-fundamentals → Animate emitter properties
gsap-sequencing → Particle burst sequences
Workflow Patterns
Page Load Animation
1. gsap-fundamentals → Understand tweens, easing
2. gsap-sequencing → Build entrance timeline
3. gsap-react → Integrate with React (if applicable)
Scroll Experience
1. gsap-scrolltrigger → Set up triggers, pins
2. gsap-sequencing → Build scrubbed timelines
3. gsap-fundamentals → Individual animation properties
Interactive UI
1. gsap-fundamentals → Hover, click animations
2. gsap-react → Event handlers, cleanup
3. gsap-sequencing → Complex interaction sequences
Temporal Collapse Stack
For the New Year countdown project:
gsap-fundamentals → Digit animations, pulse effects, easing
gsap-sequencing → Countdown sequence, final moment orchestration
gsap-react → Component integration, cleanup
Key animations:
- Digit flip on time change
- Pulse/glow intensity over time
- Final countdown dramatic sequence
- Celebration reveal at zero
Quick Reference
Task → Skills
| Task |
Primary |
Secondary |
| "Animate this element" |
fundamentals |
- |
| "Create entrance animation" |
fundamentals |
react |
| "Build page transition" |
sequencing |
fundamentals |
| "Animate on scroll" |
scrolltrigger |
fundamentals |
| "React component animation" |
react |
fundamentals |
| "Pinned scroll section" |
scrolltrigger |
sequencing |
| "Complex animation sequence" |
sequencing |
fundamentals |
| "Staggered list animation" |
fundamentals |
react |
Easing Quick Reference
| Feel |
Ease |
| Snappy UI |
power2.out |
| Smooth entrance |
power3.out |
| Playful bounce |
back.out(1.7) |
| Springy |
elastic.out |
| Ball drop |
bounce.out |
| Linear/mechanical |
none |
Fallback Behavior
- No framework stated → Assume vanilla JS, start with
gsap-fundamentals
- React mentioned → Add
gsap-react to combination
- Scroll mentioned → Add
gsap-scrolltrigger
- "Complex" or "sequence" → Add
gsap-sequencing
- Unclear requirements → Start with
gsap-fundamentals
Performance Priority
When performance is critical:
gsap-fundamentals — Use transforms, avoid layout properties
gsap-react — Proper cleanup prevents memory leaks
gsap-scrolltrigger — Use scrub wisely, batch updates
gsap-sequencing — Reuse timelines, don't recreate
1---2name: gsap-router3description: Router for GSAP animation domain. Use when implementing animations with GreenSock Animation Platform including tweens, timelines, scroll-based animations, or React integration. Routes to 4 specialized skills for fundamentals, sequencing, ScrollTrigger, and React patterns.4---5
6# GSAP Router
7
8Routes to 4 specialized skills based on animation requirements.
9
10## Routing Protocol
11
121. **Classify** — Identify animation type from user request
132. **Match** — Apply signal matching rules below
143. **Combine** — Production animations often need 2-3 skills together
154. **Load** — Read matched SKILL.md files before implementation
16
17## Quick Route
18
19### Tier 1: Core (Start Here)
20| Need | Skill | Signals |
21|------|-------|---------|
22| Basic animations, easing | `gsap-fundamentals` | tween, animate, ease, from, to, duration, delay |
23| Complex sequences | `gsap-sequencing` | timeline, sequence, orchestrate, labels, callbacks |
24| Scroll animations | `gsap-scrolltrigger` | scroll, pin, scrub, parallax, reveal, sticky |
25| React integration | `gsap-react` | React, useGSAP, ref, hook, cleanup, context |
26
27## Signal Matching
28
29### Primary Signals
30
31**gsap-fundamentals**:
32- "animate", "tween", "transition"
33- "ease", "easing", "timing"
34- "from", "to", "fromTo"
35- "duration", "delay", "repeat"
36- "stagger", "properties"
37
38**gsap-sequencing**:
39- "timeline", "sequence", "orchestrate"
40- "labels", "callbacks", "nested"
41- "position parameter", "overlap"
42- "complex animation", "choreography"
43- "play", "pause", "reverse", "seek"
44
45**gsap-scrolltrigger**:
46- "scroll", "ScrollTrigger"
47- "pin", "sticky", "fixed"
48- "scrub", "parallax"
49- "reveal on scroll", "snap"
50- "progress indicator"
51
52**gsap-react**:
53- "React", "component"
54- "useGSAP", "useRef", "hook"
55- "cleanup", "context"
56- "event handler", "state"
57
58### Confidence Scoring
59
60- **High (3+ signals)** — Route directly to matched skill
61- **Medium (1-2 signals)** — Route with fundamentals as foundation
62- **Low (0 signals)** — Start with `gsap-fundamentals`
63
64## Common Combinations
65
66### Basic Animation (1 skill)
67```
68gsap-fundamentals → Tweens, easing, basic properties
69```
70
71### React Component Animation (2 skills)
72```
73gsap-fundamentals → Animation principles, easing
74gsap-react → Hook patterns, cleanup, refs
75```
76
77### Scroll-Based Experience (3 skills)
78```
79gsap-scrolltrigger → Scroll triggers, pinning
80gsap-sequencing → Timeline for pinned sections
81gsap-fundamentals → Individual animations
82```
83
84### Full Production (3-4 skills)
85```
86gsap-fundamentals → Core animations
87gsap-sequencing → Complex orchestration
88gsap-react → Framework integration
89gsap-scrolltrigger → Scroll interactions (if needed)
90```
91
92## Decision Table
93
94| Framework | Animation Type | Complexity | Route To |
95|-----------|---------------|------------|----------|
96| Vanilla JS | Simple | Low | fundamentals |
97| Vanilla JS | Sequenced | Medium | fundamentals + sequencing |
98| Vanilla JS | Scroll-based | Medium | fundamentals + scrolltrigger |
99| React | Simple | Low | fundamentals + react |
100| React | Complex | High | All four skills |
101| React | Scroll | Medium | react + scrolltrigger |
102
103## Animation Categories
104
105### Motion Type → Skill Mapping
106
107| Animation Type | Primary Skill | Supporting Skill |
108|----------------|---------------|------------------|
109| Fade in/out | `gsap-fundamentals` | - |
110| Slide/move | `gsap-fundamentals` | - |
111| Scale/rotate | `gsap-fundamentals` | - |
112| Stagger | `gsap-fundamentals` | - |
113| Page transitions | `gsap-sequencing` | fundamentals |
114| Orchestrated reveals | `gsap-sequencing` | fundamentals |
115| Scroll reveals | `gsap-scrolltrigger` | fundamentals |
116| Parallax | `gsap-scrolltrigger` | - |
117| Pinned sections | `gsap-scrolltrigger` | sequencing |
118| React animations | `gsap-react` | fundamentals |
119| React + scroll | `gsap-react` | scrolltrigger |
120
121## Integration with Other Domains
122
123### With R3F (r3f-*)
124```
125r3f-fundamentals → 3D scene setup
126gsap-fundamentals → Object property animation
127gsap-sequencing → Camera movements, scene transitions
128```
129GSAP animates Three.js object properties via `onUpdate`.
130
131### With Post-Processing (postfx-*)
132```
133postfx-composer → Effect setup
134gsap-fundamentals → Animate effect parameters
135gsap-sequencing → Transition between effect states
136```
137GSAP drives effect intensity, colors, etc.
138
139### With Audio (audio-*)
140```
141audio-playback → Music timing
142gsap-sequencing → Sync animations to audio cues
143gsap-fundamentals → Audio-reactive property changes
144```
145Timeline callbacks sync with audio events.
146
147### With Particles (particles-*)
148```
149particles-systems → Particle emitters
150gsap-fundamentals → Animate emitter properties
151gsap-sequencing → Particle burst sequences
152```
153
154## Workflow Patterns
155
156### Page Load Animation
157```
1581. gsap-fundamentals → Understand tweens, easing
1592. gsap-sequencing → Build entrance timeline
1603. gsap-react → Integrate with React (if applicable)
161```
162
163### Scroll Experience
164```
1651. gsap-scrolltrigger → Set up triggers, pins
1662. gsap-sequencing → Build scrubbed timelines
1673. gsap-fundamentals → Individual animation properties
168```
169
170### Interactive UI
171```
1721. gsap-fundamentals → Hover, click animations
1732. gsap-react → Event handlers, cleanup
1743. gsap-sequencing → Complex interaction sequences
175```
176
177## Temporal Collapse Stack
178
179For the New Year countdown project:
180```
181gsap-fundamentals → Digit animations, pulse effects, easing
182gsap-sequencing → Countdown sequence, final moment orchestration
183gsap-react → Component integration, cleanup
184```
185
186Key animations:
187- Digit flip on time change
188- Pulse/glow intensity over time
189- Final countdown dramatic sequence
190- Celebration reveal at zero
191
192## Quick Reference
193
194### Task → Skills
195
196| Task | Primary | Secondary |
197|------|---------|-----------|
198| "Animate this element" | fundamentals | - |
199| "Create entrance animation" | fundamentals | react |
200| "Build page transition" | sequencing | fundamentals |
201| "Animate on scroll" | scrolltrigger | fundamentals |
202| "React component animation" | react | fundamentals |
203| "Pinned scroll section" | scrolltrigger | sequencing |
204| "Complex animation sequence" | sequencing | fundamentals |
205| "Staggered list animation" | fundamentals | react |
206
207### Easing Quick Reference
208
209| Feel | Ease |
210|------|------|
211| Snappy UI | `power2.out` |
212| Smooth entrance | `power3.out` |
213| Playful bounce | `back.out(1.7)` |
214| Springy | `elastic.out` |
215| Ball drop | `bounce.out` |
216| Linear/mechanical | `none` |
217
218## Fallback Behavior
219
220- **No framework stated** → Assume vanilla JS, start with `gsap-fundamentals`
221- **React mentioned** → Add `gsap-react` to combination
222- **Scroll mentioned** → Add `gsap-scrolltrigger`
223- **"Complex" or "sequence"** → Add `gsap-sequencing`
224- **Unclear requirements** → Start with `gsap-fundamentals`
225
226## Performance Priority
227
228When performance is critical:
2291. `gsap-fundamentals` — Use transforms, avoid layout properties
2302. `gsap-react` — Proper cleanup prevents memory leaks
2313. `gsap-scrolltrigger` — Use `scrub` wisely, batch updates
2324. `gsap-sequencing` — Reuse timelines, don't recreate