Setup & Installation
npx skills add https://github.com/greensock/gsap-skills --skill gsap-frameworks
https://github.com/greensock/gsap-skills/tree/main/skills/gsap-frameworks
View on GitHubWhat This Skill Does
Handles GSAP animation setup and teardown for Vue, Nuxt, Svelte, and SvelteKit. Covers component lifecycle integration: creating tweens after mount, scoping selectors to the component root, and cleaning up animations and ScrollTriggers on unmount.
Without lifecycle-aware setup, GSAP selectors silently match elements across the whole page and ScrollTrigger instances accumulate on every mount, causing animation conflicts and memory leaks that are hard to trace.
When to use it
- Adding scroll-triggered animations to a Vue component without leaking ScrollTrigger instances
- Scoping GSAP selectors to a single Svelte component so .box doesn't match elements elsewhere on the page
- Cleaning up GSAP timelines when a Vue route component unmounts
- Running GSAP inside onMount in SvelteKit with proper ctx.revert() in the cleanup return
- Refreshing ScrollTrigger positions after async data loads in a Vue component using nextTick