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
Decision gist · record as of 2026-07-27
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.
Use it when
- gsap-router helps you determine this by analyzing your animation scope.
- gsap-router offers a comprehensive routing guide that maps common animation scenarios to their optimal GSAP skills.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Similar skills
Install
Bbeierle12/Skill-MCP-Claude/gsap-router · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
skills/gsap-router/SKILL.md
skills/gsap-router/_meta.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Route animation request to appropriate GSAP skill based on requirements”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
gsap-scrolltrigger enables you to create dynamic scroll-based animations and parallax effects using GSAP's powerful ScrollTrigger plugin. Perfect for building engaging, scroll-driven interactions that respond to user viewport movement and create immersive visual experiences on modern websites.
This skill provides a browser-based management layer for routing sophisticated 3D and visual projects to their appropriate specialized handlers within an MCP server environment. It integrates with Claude Code CLI to enable on-demand skill loading, letting you organize markdown-based instruction sets that extend Claude's capabilities for domain-specific visual work.
audio-router intelligently directs audio processing requests to the right specialized skill, whether for playback control, sound analysis, or reactive audio handling. Built for Claude, it streamlines how audio workflows are orchestrated across multiple focused capabilities.
postfx-router intelligently directs Claude's post-processing requests to specialized skills based on the effect type being applied. This routing layer simplifies effect management by matching incoming requests with the appropriate handler, reducing manual configuration and improving workflow efficiency in MCP-based systems.
shader-router directs shader-related work to the right specialized skill by analyzing your visual objectives. Built as a browser-based management layer for Claude MCP skills, it streamlines how you organize and deploy shader expertise across your workflow.
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.