What problem does it solve? GSAP animations in component frameworks often leak memory, target wrong elements, or run before the DOM exists because developers skip lifecycle-aware setup and cleanup. This Skill provides correct patterns for creating, scoping, and reverting GSAP tweens and ScrollTriggers in Vue, Nuxt, and Svelte. ## Core Features & Use Cases - Lifecycle-Safe Setup: Create animations inside onMounted/onMount and revert them with ctx.revert() on unmount to prevent leaks and detached-node errors. - Scoped Selectors: Use gsap.context(callback, scope) so selectors like .box only match elements inside the current component. - Nuxt Plugin Management: A typed useGSAP composable registers plugins once and lazy-loads rarely used plugins like SplitText or MorphSVG to reduce bundle size. - Use Case: A developer building a Nuxt landing page needs scroll-triggered reveals per component; this Skill shows how to register ScrollTrigger once, scope animations per component, and clean up on route change. ## Quick Start Show me how to add a GSAP scroll-triggered fade-in animation to my Vue 3 component with proper cleanup on unmount.
