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)

code

gsap-fundamentals → Tweens, easing, basic properties

React Component Animation (2 skills)

code

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

Scroll-Based Experience (3 skills)

code

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

Full Production (3-4 skills)

code

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-*)

code

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-*)

code

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

GSAP drives effect intensity, colors, etc.

With Audio (audio-*)

code

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-*)

code

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

Workflow Patterns

Page Load Animation

code

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

Scroll Experience

code

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

Interactive UI

code

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:

code

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