Gsap Frameworks

This covers the proper lifecycle patterns for using GSAP in Vue, Svelte, and similar component frameworks. It handles the critical timing issues like creating animations after DOM mount and cleaning them up on unmount to prevent memory leaks. The skill emphasizes scoping selectors with gsap.context() so your animations don't accidentally target elements outside your component, which is a common gotcha when multiple component instances exist. It's basically the non-React counterpart to the gsap-react skill, giving you the same level of cleanup safety but with onMounted/onMount instead of useGSAP.

skills.sh installs: 70.8K
GitHub stars: 18.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add greensock/gsap-skills --skill gsap-frameworks --agent claude-code

Installs into .claude/skills of the current project.

Files

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