Implements high-performance GSAP animations in Vue, Svelte, and Nuxt using lifecycle-aware best practices for cleanup and scoping.
This skill provides comprehensive guidance for integrating the GreenSock Animation Platform (GSAP) into component-based frameworks like Vue, Nuxt, and Svelte. It ensures AI-generated code correctly handles framework lifecycles, utilizes gsap.context() for automatic cleanup and selector scoping, and prevents memory leaks during component unmounting. Whether you're building interactive Nuxt 4 applications or lightweight Svelte components, this skill enables robust, production-grade animations while avoiding common pitfalls like global selector collisions and orphaned ScrollTriggers.
주요 기능
01Nuxt 4 composable and lazy-loading patterns
02Automatic selector scoping with gsap.context()
03Lifecycle-aware animation setup and cleanup
04ScrollTrigger management and refresh patterns
05Svelte and Vue 3 (Composition API) implementation guides
062,963 GitHub stars
사용 사례
01Implementing scroll-driven animations in Nuxt 4 applications
02Building animated UI components in Vue or Svelte projects
03Optimizing GSAP plugin loading for performance-sensitive web apps
