What problem does it solve? GSAP animations in component frameworks like Vue, Nuxt, and Svelte often leak memory, target wrong elements, or run before the DOM exists because developers skip lifecycle-aware setup and cleanup. This Skill provides the correct patterns for creating, scoping, and reverting GSAP animations and ScrollTriggers inside component lifecycles. ## Core Features & Use Cases - Lifecycle-Safe Animation Setup: Create tweens and ScrollTriggers inside onMounted/onMount and revert them with ctx.revert() on unmount to prevent leaks and detached-node animations. - Scoped Selectors with gsap.context(): Pass a container ref as the scope so selectors like .box only match elements inside the component, never the rest of the page. - Nuxt 4 Composable with Lazy Plugin Loading: A typed useGSAP composable that registers plugins once and lazy-loads rarely used plugins like SplitText or MorphSVG to reduce bundle size. - Use Case: You are building a Nuxt landing page with scroll-triggered reveals. Use this Skill to register ScrollTrigger once, scope animations per component, and clean them up on route change without memory leaks. ## Quick Start Add GSAP scroll animations to my Vue 3 component with proper cleanup on unmount.
