gsap-router_skill

Overview

This skill routes GSAP animation requests to the most appropriate specialized skill based on the user's needs. It analyzes signals in the request—like keywords for tweens, timelines, scroll interactions, or React integration—and directs to fundamentals, sequencing, ScrollTrigger, or React patterns. The router also recommends combinations when multiple concerns are present.

How this skill works

The router classifies the animation type from the user request, matches keyword signals against predefined categories, and scores confidence to decide a direct route or a combined route. High signal counts route directly; medium counts pair with fundamentals; low or unclear requests default to fundamentals. It can suggest 2–4 skills together for production scenarios and prioritizes performance and cleanup rules when relevant.

When to use it

• When you need guidance on which GSAP specialization to consult for a task
• When requests mention multiple animation concerns (timeline + scroll + React)
• When you want a recommended combination of skills for production-grade animations
• When you need a clear fallback for unclear or low-signal requirements
• When performance, cleanup, or framework-specific patterns are important

Best practices

• Classify the request with explicit keywords (tween, timeline, ScrollTrigger, React) to get precise routing
• Combine skills when building production features: fundamentals + sequencing + React/ScrollTrigger as needed
• Default to fundamentals for low-confidence or vanilla JS use cases
• Prioritize transforms and avoid layout-only properties for performance
• Ensure React patterns include refs and cleanup to prevent memory leaks

Example use cases

• Simple fade or slide on a DOM element → route to gsap-fundamentals
• Page transition with choreographed steps → route to gsap-sequencing (+ fundamentals)
• Reveal elements as the user scrolls with pinned sections → route to gsap-scrolltrigger + sequencing + fundamentals
• Animating a React component with lifecycle cleanup → route to gsap-react + fundamentals
• Full production animation with audio sync and parallax → combine fundamentals, sequencing, scrolltrigger, and react if in a React app