Animation Hybrid Architect

When This Skill Activates

Activate when the task involves:

• Choosing between Motion and GSAP (or combining both)
• Integrating Motion UI with GSAP scroll/timeline layers
• Defining animation boundaries in a multi-library project
• Optimizing animation bundles and performance budgets
• Establishing shared animation utilities (reduced motion, cleanup, easing)
• Building animation skillsets or MCP tool definitions for teams

Core Principles

1. Boundary by concern, not by page. Motion owns the UI layer (modals, drawers, buttons, gestures, layout shifts). GSAP owns the content layer (scroll sequences, text reveals, SVG morphs, hero timelines). They coexist in the same viewport but never animate the same element simultaneously.
2. Cleanup is architecture. GSAP instances must be killed; Motion components unmount automatically. A shared cleanup protocol prevents memory leaks in SPAs.
3. Bundle budget is the constraint. The combination must stay under performance targets. For ultra-strict runtimes (e.g., 5KB initial), use Motion mini only and lazy-load GSAP. Load GSAP plugins on-demand; use Motion's mini API for non-critical paths.

Workflow