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 in these frameworks. ## Core Features & Use Cases - Lifecycle-Safe Animation Setup: Create tweens and ScrollTriggers inside onMounted (Vue) or onMount (Svelte) so the DOM is ready, and revert them on unmount with ctx.revert(). - Scoped Selectors: Use gsap.context(callback, scope) with a container ref so selectors like .box only match elements inside the current component. - Nuxt Plugin Management: 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 Vue 3 dashboard where cards animate in on scroll. This Skill shows you how to scope the ScrollTrigger to the component, refresh it after data loads, and clean it up when the user navigates away. ## Quick Start Show me how to add a GSAP scroll-triggered fade-in animation to my Vue 3 component with proper cleanup on unmount.
