Gsap Router

GSAP Router

Routes to 4 specialized skills based on animation requirements.

Routing Protocol

1. Classify — Identify animation type from user request
2. Match — Apply signal matching rules below
3. Combine — Production animations often need 2-3 skills together
4. Load — Read matched SKILL.md files before implementation

Quick Route

Tier 1: Core (Start Here)

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

Animation Categories

Motion Type → Skill Mapping

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

Easing Quick Reference

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:

1. gsap-fundamentals — Use transforms, avoid layout properties
2. gsap-react — Proper cleanup prevents memory leaks
3. gsap-scrolltrigger — Use scrub wisely, batch updates
4. gsap-sequencing — Reuse timelines, don't recreate