gsap-frameworks
GSAP animation setup for Vue, Svelte, Nuxt, and other component frameworks
by greensockFree
Description
gsap-frameworks is a GreenSock skill for setting up GSAP animations in Vue, Nuxt, Svelte, SvelteKit and other component frameworks that have a lifecycle. It applies when you write or review GSAP code in those frameworks. The core rule is to create tweens and ScrollTriggers only after the component's DOM is available, using hooks such as onMounted in Vue or onMount in Svelte. You then clean them up in the unmount step, so nothing keeps running on detached nodes. The skill says to call ctx.revert() in the unmount hook to prevent memory leaks and style pollution. It includes a section on the Vue 3 Composition API. For React, the skill sends you to the separate gsap-react skill, which covers the useGSAP hook and gsap.context(). For the animations themselves it points to gsap-core and gsap-timeline for tweens and timelines, and to gsap-scrolltrigger for scroll-based animation. It is installed with npx skills from the greensock/gsap-skills repository, and its security audits all pass.…
Highlights
- Create GSAP tweens after the DOM mounts
- Cleanup with ctx.revert() on unmount
- Vue 3 Composition API guidance
- Svelte and SvelteKit guidance
- Points to gsap-react for React
Ratings & Reviews
No ratings yet
Be the first to rate gsap-frameworks.
People also visit
gsap-utils
Pure utility functions for math, value mapping, randomization, array handling
manim-video
Build reusable Manim explainers for technical concepts, graphs, system diagrams
motion-foundations
Motion tokens, spring presets, performance rules, device adaptation
gsap-frameworks FAQ
What does the skill cover?
Setting up GSAP animations in Vue, Nuxt, Svelte, SvelteKit and other component frameworks with a lifecycle.
When should tweens be created?
After the component's DOM is available, for example in onMounted or onMount.
How do I clean up?
Call ctx.revert() in the unmount hook, so nothing runs on detached nodes.
What about React?
The skill sends React work to the separate gsap-react skill, which uses useGSAP and gsap.context().
How do I install it?
Run npx skills add https://github.com/greensock/gsap-skills --skill gsap-frameworks.
What do the security audits show?
Gen Agent Trust Hub, Socket and Snyk all pass.
What are the best gsap-frameworks alternatives?
Popular alternatives to gsap-frameworks include hyperframes-animation, gsap-performance and gsap-utils. See all gsap-frameworks alternatives