What is the gsap-frameworks skill?
gsap-frameworks is an official SKILL.md in the greensock/gsap-skills repository. It teaches an AI coding agent GSAP in Vue, Nuxt, Svelte and other non-React frameworks: create on mount, scope selectors with gsap.context, revert on unmount and refresh ScrollTrigger after DOM updates.
gsap-frameworks is the non-React framework skill in the official greensock/gsap-skills set. Its SKILL.md applies when someone wants GSAP in Vue, Nuxt, Svelte or SvelteKit, or asks about onMounted, onMount and cleanup on unmount.
React has its own skill, gsap-react. Tweens and timelines come from gsap-core and gsap-timeline.
What changes in your agent's output
- Tweens and ScrollTriggers are created after the DOM exists, in
onMountedfor Vue oronMountfor Svelte. - Everything is wrapped in
gsap.context()with the container as scope, so selectors only match inside the component. - Cleanup calls
ctx.revert()inonUnmountedfor Vue, or in the function returned fromonMountfor Svelte. - ScrollTrigger refresh happens after DOM updates, using
nextTickin Vue ortickin Svelte. - Plugins are registered once at app level, not in a component body.
Framework sections
The skill has separate sections for Vue 3 with the Composition API, Vue 3 with script setup, Nuxt 4 and Svelte. The shared principle is create after mount, scope to the root and kill or revert on unmount.
The Nuxt 4 section covers a useGSAP() composable that gives typed access to the gsap instance and a lazy load method, so rarely used plugins do not inflate the initial bundle.
Who the gsap-frameworks skill is for
Best for
- Vue, Nuxt and Svelte projects where animations leak between route changes.
- Agents that call
gsap.to('.box')in setup before the DOM exists. - Teams pairing it with gsap-scrolltrigger for scroll animation inside components.
Not for
- React or Next.js. Use gsap-react.
- Frameworks the skill does not name beyond its general principles, where the agent applies the same mount, scope, cleanup pattern.
How to install GSAP Frameworks Skill: Vue, Nuxt and Svelte
git clone https://github.com/greensock/gsap-skills.git/plugin marketplace add greensock/gsap-skills, which the README documents.Clone the repository
Run
git clone https://github.com/greensock/gsap-skills.git. The skill is the skills/gsap-frameworks folder, which holds one SKILL.md.Copy the skill folder
Copy skills/gsap-frameworks into your agent's skills directory. The README lists ~/.claude/skills/ for Claude Code, ~/.cursor/skills/ for Cursor, ~/.config/opencode/skills/ for OpenCode and ~/.codex/skills/ for OpenAI Codex.
Install GSAP in the project
The skill guides the agent's code but does not add the library. Add the gsap package to your project with your package manager. It includes every plugin.
Ask for animation work
Describe the motion you want, such as a staggered card entrance, and name the skill if your agent needs a nudge.
Check that it loaded
Ask the agent for a Vue component that fades in its list items on mount. The result should create the tween in onMounted inside gsap.context() and revert it in onUnmounted.
Key features
- Shared lifecycle principlesCreate after the component DOM is available, kill or revert on unmount, and scope selectors to the component root.
- Vue 3 Composition API
gsap.context()takes the container ref as scope, andonUnmountedcallsctx.revert()so tweens and ScrollTriggers are killed and inline styles reverted. - Vue 3 script setupA dedicated section shows the same mount, scope and revert pattern in script setup syntax.
- Nuxt 4 composable
useGSAP()provides typed access to gsap and a lazy load method. The skill says to lazy-load rarely used plugins to cut initial bundle size. - Svelte patternUse
bind:thisfor the root element, pass it togsap.context(), and return() => ctx.revert()fromonMount. - Scoped selectorsPass the container as the second argument to
gsap.context(). Without it,gsap.to('.box')can affect other instances or the rest of the page. - ScrollTrigger cleanupCreate ScrollTriggers in the same context callback as tweens, and refresh them after DOM updates or async content loads.
- Create versus kill guidanceA short section pairs each creation point, such as onMounted, with its matching cleanup point.
- Do Not listAvoid creating tweens before mount, unscoped selectors, skipped cleanup and plugin registration inside a component body.
Frequently asked questions
What is the gsap-frameworks skill?
It is the skills/gsap-frameworks folder in the greensock/gsap-skills repository. Its SKILL.md teaches an AI coding agent how to use GSAP in Vue, Nuxt, Svelte and other non-React frameworks, with lifecycle timing, scoped selectors and cleanup on unmount.
How do I install gsap-frameworks?
Clone greensock/gsap-skills and copy skills/gsap-frameworks into your agent's skills folder. The README lists paths for Claude Code, Cursor, OpenCode and OpenAI Codex. Add the gsap package to your project too, since the skill guides code and does not install it.
Which frameworks does the skill cover?
Vue 3 with the Composition API and script setup, Nuxt 4, and Svelte are documented directly. The principles section applies to other frameworks as well: create after mount, scope selectors to the component and revert on unmount.
Why scope selectors with gsap.context?
Without a scope, a selector such as .box is searched across the whole page and can animate elements in other component instances. Passing the container as the second argument limits matching to that root.
How does cleanup work in Svelte?
Svelte's onMount can return a cleanup function. The skill says to return () => ctx.revert() from it, so animations and ScrollTriggers created in the context are killed when the component is destroyed.
What does the Nuxt 4 section recommend?
It covers a useGSAP() composable with typed access to gsap and a lazy load method. It tells the agent to lazy-load plugins that are not widely used in the app, and to use gsap.context with onUnmounted as in Vue.
What about React?
React has its own skill, gsap-react, covering useGSAP, scope and contextSafe. This skill points there for React patterns and stays on Vue, Svelte and similar mount and unmount lifecycles, so you can install only the one your stack needs.