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.
gsap-router analyzes your animation requirements and intelligently routes your request to the most appropriate GSAP skill. It evaluates factors like animation complexity, timing needs, and integration context to match you with the right handler—whether that's fundamentals for basic tweens, sequencing for orchestrated timelines, or specialized skills for scroll-based or framework-specific animations.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/gsap-router · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/gsap-router ~/.claude/skills/gsap-routerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I choose the right GSAP skill for my animation?
gsap-router analyzes your animation requirements and intelligently routes your request to the most appropriate GSAP skill. It evaluates factors like animation complexity, timing needs, and integration context to match you with the right handler—whether that's fundamentals for basic tweens, sequencing for orchestrated timelines, or specialized skills for scroll-based or framework-specific animations.
When should I use gsap fundamentals vs sequencing?
gsap-router helps you determine this by analyzing your animation scope. Use fundamentals for straightforward element animations and simple tweens. Choose sequencing when you need to coordinate multiple animations with precise timing, callbacks, and complex orchestration. gsap-router's signal matching rules classify your scenario and route accordingly.
What animation routing guide does gsap-router provide?
gsap-router offers a comprehensive routing guide that maps common animation scenarios to their optimal GSAP skills. It covers workflow patterns for staggered animations, scroll-triggered effects, timeline orchestration, React component animations, and Three.js integration. The guide uses signal matching rules to classify animation types and direct you to specialized handlers.
How does gsap-router handle React and framework integration?
gsap-router recognizes framework-specific contexts and routes React component animations, cleanup patterns, and memory leak prevention to appropriate skills. It understands integration requirements with React, Three.js, and other domains, ensuring you get framework-aware guidance for animations that work seamlessly within your existing architecture.
Can gsap-router combine multiple GSAP skills for complex animations?
Yes. gsap-router determines which GSAP skills to combine for production animations by analyzing your requirements holistically. It identifies when you need to blend fundamentals with sequencing, add scroll triggers, or integrate framework-specific patterns, then routes you to the skill combinations that work best together.
What workflow patterns does gsap-router teach for animations?
gsap-router teaches workflow patterns for common animation scenarios including scroll reveals, parallax effects, pinned sections, staggered animations, callback sequencing, and performance optimization. Each pattern is routed through appropriate GSAP skills with best practices for timing, easing, cleanup, and avoiding memory leaks in production environments.
SKILL.md
rendered from the published skill — quoted content, verbatim
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:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/gsap-router/SKILL.md
skills/gsap-router/_meta.json