gsap-frameworks
by greensockgsap-frameworks is the GSAP skill for Vue, Nuxt, Svelte, SvelteKit, and other non-React frameworks. It covers lifecycle-safe animation setup, scoped selectors, and cleanup on unmount so component animations behave correctly in Frontend Development.
This skill scores 84/100, which means it is a solid listing candidate for directory users: it has enough concrete framework-specific guidance to reduce guesswork for Vue/Svelte and similar lifecycle-based apps, though it is narrower than a full animation generalist skill. The repo gives a credible install decision because it clearly states when to use it, what to avoid (React), and how to handle lifecycle cleanup and selector scoping.
- Strong triggerability: the frontmatter explicitly names Vue, Nuxt, Svelte, SvelteKit, and lifecycle cues like onMounted/onMount/onDestroy, making it easy for an agent to route requests correctly.
- Operational clarity: the skill documents core rules for DOM availability, cleanup on unmount, and scoping selectors, which are exactly the kinds of details that reduce agent guesswork.
- Good install value: it points users to related skills for core tweens, timelines, scroll-based animation, and React, helping the directory user understand fit and boundaries before installing.
- No install command, scripts, or support files are present, so adoption depends on reading the markdown guidance rather than running a packaged workflow.
- The repository appears documentation-heavy with no separate workflow assets or tests, so users should expect guidance rather than executable tooling.
Overview of gsap-frameworks skill
What gsap-frameworks is for
gsap-frameworks is the GSAP skill for Vue, Nuxt, Svelte, SvelteKit, and other non-React component frameworks. It helps you write animation code that respects lifecycle timing, selector scope, and cleanup so your effects behave correctly after mount and disappear cleanly on unmount.
Who should install it
Use the gsap-frameworks skill if you are building Frontend Development animations inside a component framework and need more than a generic prompt can reliably provide. It is a strong fit when your task involves onMounted, onUnmounted, onMount, onDestroy, component refs, or DOM scoping inside a single component.
What it helps you avoid
The main value of gsap-frameworks is preventing common framework mistakes: animating before the DOM exists, leaking ScrollTriggers or tweens after route changes, and accidentally selecting elements outside the component. If you are comparing gsap-frameworks install decisions, this is the skill to choose when your output must be lifecycle-safe and component-scoped.
How to Use gsap-frameworks skill
Install and read the right files first
Install with npx skills add greensock/gsap-skills --skill gsap-frameworks. After that, start with skills/gsap-frameworks/SKILL.md, because it contains the core rules and framework-specific patterns. If you are working from a repo clone, read the examples in the same skill folder before drafting code.
Turn a vague request into a usable prompt
A good gsap-frameworks usage prompt should name the framework, the animation goal, and the cleanup expectations. For example: “Create a Vue 3 component animation where cards fade and slide in on mount, use ref and onMounted, scope selectors to the component root, and clean up on unmount.” That is much better than “animate this page,” because the skill needs lifecycle and structure details to produce safe code.
Include the inputs the skill needs
The best gsap-frameworks guide inputs usually include: framework version, whether the code uses composition API or script setup, what elements animate, whether selectors or refs are preferred, and whether the animation is one-time, reversible, or scroll-driven. If you also mention route changes, SSR, or nested components, the skill can avoid patterns that break in those environments.
Use the repository as a pattern source
The file to read first is SKILL.md; if you need implementation examples, look for the framework example sections referenced there, especially Vue and Svelte patterns. In practice, gsap-frameworks for Frontend Development works best when you treat the skill as a code-shaping assistant: give it the component file, the desired motion behavior, and any constraints on cleanup, scoping, or SSR.
gsap-frameworks skill FAQ
Is gsap-frameworks only for Vue and Svelte?
No. Vue and Svelte are the main targets, but the guidance also applies to other component frameworks with mount and unmount phases. If your framework has a clear lifecycle and you need component-scoped GSAP, gsap-frameworks is usually a good fit.
When should I use gsap-react instead?
Use gsap-react for React projects. The gsap-frameworks skill is not the right choice when the app depends on React hooks and useGSAP, because React-specific patterns differ from Vue or Svelte cleanup and scoping.
Do I need this if I already know GSAP?
Yes, if you need framework-safe integration. Knowing GSAP animation basics does not automatically solve lifecycle timing, selector scoping, or teardown. The gsap-frameworks skill is most useful when the animation code must live inside a component, not on a static page.
Is it beginner-friendly?
Yes, if you can describe a component and a target animation clearly. Beginners usually struggle only when they omit framework details or cleanup requirements. If you provide the component structure and desired motion, the skill can guide a workable implementation.
How to Improve gsap-frameworks skill
Give the component shape, not just the effect
The biggest quality jump comes from specifying the component structure: what elements exist, how many of them there are, and whether they are rendered conditionally. A prompt like “animate three feature cards in a Nuxt component using refs and clean teardown” produces better gsap-frameworks output than “make it smooth.”
State lifecycle and cleanup requirements explicitly
If the animation should run once, re-run on route change, or be killed on leave, say so up front. gsap-frameworks performs best when it knows whether to use mount-only setup, context-style scoping, or explicit cleanup in onUnmounted/onDestroy.
Share the constraints that change the implementation
Mention SSR, hydration, dynamic lists, slot content, or nested child components when they matter. These details help the skill avoid brittle selector logic and explain whether refs, component roots, or wrapper elements are safer for your case.
Review the first output for scope and teardown
The most common failure mode is code that looks correct visually but is too broad in selector scope or incomplete in cleanup. If the first answer is close, improve it by asking for tighter component scoping, explicit teardown, or a version adapted to your exact framework syntax.