Gsap Frameworks

Official GreenSock skill for using GSAP in Vue, Nuxt, Svelte, and SvelteKit. Covers the lifecycle patterns you need: creating animations after mount (onMounted, onMount), scoping selectors with gsap.context() so they don't bleed into other components, and cleaning up on unmount with ctx.revert() to avoid leaks. The Nuxt section includes a typed composable for lazy-loading plugins like SplitText or MorphSVG to keep your bundle lean. If you're animating in a component framework that isn't React, this is the one to pull in. For React specifically, use gsap-react instead, which covers useGSAP hook patterns.

skills.sh installs: 2.2K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill gsap-frameworks --agent claude-code

Installs into .claude/skills of the current project.

Files

GSAP with Vue, Svelte, and Other Frameworks

Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills

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.