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