gsap-frameworks
Installation
Summary
GSAP animation setup for Vue, Svelte, Nuxt, and other component frameworks with lifecycle management.
- Use onMounted / onMount to create tweens and ScrollTriggers after the DOM is available; clean up with ctx.revert() in unmount hooks to prevent memory leaks and style pollution.
- Scope all selectors to the component root via gsap.context(callback, containerRef) so animations only affect elements inside that component, not the rest of the page.
- Includes runnable examples for Vue 3 (Composition API and script setup), Nuxt 4 with lazy-loaded plugins, and Svelte with cleanup functions.
- Call ScrollTrigger.refresh() after layout changes (data loads, DOM updates) to recalculate trigger positions; register plugins once at app level, not per component.
SKILL.md
GSAP with Vue, Svelte, and Other Frameworks
When to Use This Skill
Apply when writing or reviewing GSAP code in Vue (or Nuxt), Svelte (or SvelteKit), or other component frameworks that use a lifecycle (mounted/unmounted). For React specifically, use gsap-react (useGSAP hook, gsap.context()).
Related skills: For tweens and timelines use gsap-core and gsap-timeline; for scroll-based animation use gsap-scrolltrigger; for React use gsap-react.
Principles (All Frameworks)
- Create tweens and ScrollTriggers after the component’s DOM is available (e.g. onMounted, onMount).
- Kill or revert them in the unmount (or equivalent) cleanup so nothing runs on detached nodes and there are no leaks.
- Scope selectors to the component root so
.boxand similar only match elements inside that component, not the rest of the page.
Vue 3 (Composition API)
See examples/vue/ for a runnable Vite + Vue 3 project demonstrating these patterns.
Use onMounted to run GSAP after the component is in the DOM. Use onUnmounted to clean up.