---
id: Bbeierle12/Skill-MCP-Claude/gsap-router
version: "ea05c1f6"
license: MIT
install: manual
updated: 2026-07-27
---

# gsap-router — gsap-router intelligently directs animation requests to specialized GSAP skills based on your specific needs. It analyzes requirements and routes tasks to the most appropriate handler, streamlining animation workflows and ensuring efficient skill delegation across your animation toolkit.

Publisher: Bbeierle12 · Stars: 8 · Updated: 2026-07-27

Install (manual): `git clone https://github.com/Bbeierle12/Skill-MCP-Claude`

## SKILL.md

# 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)
| 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:
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


[View on SkillFed](https://skillfed.io/Bbeierle12/Skill-MCP-Claude/gsap-router) · [View on GitHub](https://github.com/Bbeierle12/Skill-MCP-Claude)