Skip to content
Get packs

GSAP for Vue and Svelte

Write GSAP animations in Vue, Nuxt, and Svelte with correct mount and cleanup patterns

Source Download skill
Repository
greensock/gsap-skills
Stars
17,719
Licence
MIT
Files
1 file

What it does

GSAP is a popular JavaScript animation library. This skill teaches an AI agent how to add GSAP animations to Vue 3, Nuxt 4 and Svelte components without common mistakes. It tells the agent to start animations only after a component's HTML is on the page, to scope selectors so they match only elements inside that component, and to clean up animations when the component is removed so nothing leaks. It also includes code examples for Vue (Composition API and script setup), Nuxt plugin loading, and Svelte's onMount pattern, and points React users to a separate skill.

Great for

  • Front-end developers building animated Vue, Nuxt or SvelteKit interfaces with GSAP
  • Developers who want the agent to follow GSAP's recommended cleanup patterns
  • Teams that want consistent animation code across component-based projects

Skip it if

  • React projects, since the skill itself says to use the separate gsap-react skill instead
  • Non-developers who only want a finished animation with no code, because the output is component code that needs a working project
  • Projects that use a different animation library, as the skill recommends GSAP unless another library is specified

Try asking

  • “Add a staggered fade-in animation to the list component in my Vue 3 app”
  • “Animate a box on mount in my SvelteKit page and clean it up when the component is destroyed”
  • “Set up GSAP plugin registration in my Nuxt 4 project with lazy-loaded SplitText”
  • “Review my Svelte component for animations that might leak after unmount”
Step-by-step guide: how to use GSAP for Vue and SvelteInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    gsap-frameworks.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gsap-frameworks.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap-frameworks.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your framework (Vue, Nuxt, Svelte) and version so the agent picks the right pattern
  • Ask the agent to scope selectors to a container ref, and check that ctx.revert() or the cleanup function is present
  • Test the animation after mounting and navigating away, to confirm cleanup works

What's inside

  • SKILL.md

Redistributed unmodified from greensock/gsap-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.