What problem does it solve? GSAP animations in component frameworks often leak memory, target elements outside the component, or run before the DOM exists. This Skill provides correct lifecycle patterns for creating and destroying GSAP tweens and ScrollTriggers in Vue, Nuxt, and Svelte. ## Core Features & Use Cases - Lifecycle-safe animation setup: Create tweens inside onMounted/onMount and revert them with gsap.context() and ctx.revert() on unmount. - Scoped selectors: Pass a container ref to gsap.context() so selectors like .box only match elements inside the component. - Nuxt composable with lazy 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 Vue 3 landing page with scroll-triggered reveals. Use this Skill to wrap animations in gsap.context(container.value), register ScrollTrigger once at app level, and call ctx.revert() in onUnmounted so navigating away leaves no orphaned triggers. ## Quick Start Add GSAP scroll-triggered animations to my Vue 3 component with proper scoping and cleanup on unmount.
