GSAP with Vue, Svelte, and Other Frameworks

Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills

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 .box and similar only match elements inside that component, not the rest of the page.

Vue 3 (Composition API)

For a runnable Vite + Vue 3 project demonstrating these patterns, see the upstream example at https://github.com/greensock/gsap-skills/tree/main/examples/vue.