What problem does it solve? GSAP animations in component frameworks like Vue, Nuxt, and Svelte often leak memory, target elements outside the component, or run before the DOM exists. This Skill provides the correct lifecycle patterns—creating animations after mount, scoping selectors to the component root, and reverting everything on unmount—so animations behave correctly in real applications. ## Core Features & Use Cases - Lifecycle-Safe Patterns: Create tweens and ScrollTriggers inside onMounted/onMount and call ctx.revert() in onUnmounted or the onMount cleanup return. - Scoped Selectors: Use gsap.context(callback, scope) with a container ref so selectors like .box only match elements inside the component. - Nuxt 4 Composable: 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 landing page where each section animates in on scroll. Use this Skill to wrap each section's GSAP code in a scoped context and guarantee ScrollTriggers are killed when the user navigates away. ## Quick Start Show me how to animate a list of items with GSAP in my Vue 3 component, including proper cleanup when the component unmounts.
