gsap-frameworks
Official GSAP skill for Vue, Svelte and other non-React frameworks: lifecycle, scoping selectors and cleanup on unmount.
- Kind
- Skill
- Works with
- Claude Code, Cursor
- Languages
- TypeScript / JavaScript
- Source
- GSAP skills (GreenSock) @ aed9cfd32777
- Path
- skills/gsap-frameworks/SKILL.md
- Jobs
- Implementation
- Topics
- Frontend frameworks, Motion graphics
Credit
- Made by
- greensock
- Original
- github.com/greensock/gsap-skills/blob/aed9cfd3277740755f6bfc1…
- License
- MIT
Listed by Skill Manifest; not made by us.
InstallInstall it with npx.
npx skills add https://github.com/greensock/gsap-skills
Install factsScanned 2 Nov 2026
- Adds
- .claude/skills/gsap-frameworks/ (the skill folder)
- 2 file(s) the skill refers to
- Runs scripts
- None found
- Uses the network
- None found
- Needs secrets
- None found
- Source revision
- aed9cfd32777
- Licence
- MIT
- Last activity
- 29 Jul 2026
- Review
- Reviewed
Found by a static scan of the stored text; nothing is run. “None found” is not a guarantee, so read what you install before you run it.
- Only the main file is read; other files in the folder are not scanned
# 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.
## 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.
```javascript
import { onMounted, onUnmounted, ref } from "vue";
import { gsap } from "gsap";
…