skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

Implements GSAP animations in Vue and Svelte components with lifecycle-safe setup and cleanup.

Updated Jul 16, 2026
Search Tags:#frontend#vue#svelte#animation#lifecycle#gsap#scrolltrigger
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill gsap-frameworks-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/X-manist/Cohmira --skill gsap-frameworks-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations in component frameworks like Vue and Svelte often leak memory, target wrong elements, or run before the DOM exists because developers skip lifecycle handling, selector scoping, and cleanup on unmount. ## Core Features & Use Cases - Lifecycle-Safe Setup: Creates tweens and ScrollTriggers inside onMounted (Vue) or onMount (Svelte) so the DOM is guaranteed to exist. - Scoped Selectors: Uses gsap.context(callback, scope) so selectors like .box only match elements inside the component, not the whole page. - Automatic Cleanup: Calls ctx.revert() in onUnmounted or the onMount return function to kill animations and ScrollTriggers and revert inline styles. - Use Case: A developer building a Nuxt landing page needs staggered entrance animations and scroll-triggered reveals per component without animations persisting after navigation or affecting sibling components. ## Quick Start Ask the AI to add a GSAP staggered entrance animation to a Vue 3 component using gsap.context scoped to the component root with cleanup on unmount.

Frequently Asked Questions about gsap-frameworks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use GSAP in a Vue 3 component?▼

Create GSAP animations inside onMounted so the DOM exists, wrapping them in gsap.context with the container ref as scope. Call ctx.revert() in onUnmounted to kill all tweens and ScrollTriggers and revert inline styles.

How to add GSAP animations in Svelte?▼

Use onMount to run GSAP after the DOM is ready, passing a bind:this element reference as the scope to gsap.context. Return a cleanup function from onMount that calls ctx.revert() when the component is destroyed.

Why do my GSAP selectors affect other components on the page?▼

Global selectors like .box match elements across the entire page when no scope is provided. Pass the component's container element as the second argument to gsap.context so selectors only search within that subtree.

Does GSAP ScrollTrigger need cleanup in Vue or Svelte?▼

Yes, ScrollTriggers created inside a gsap.context callback are tracked and reverted when ctx.revert() is called. Create them inside the same context as your tweens and call revert in the unmount lifecycle.

Should I use this skill or gsap-react for a React project?▼

For React, use the gsap-react skill, which covers the useGSAP hook and React-specific context patterns. This skill targets Vue, Nuxt, Svelte, and SvelteKit lifecycle patterns instead.

Related Skills

Explore More Software Engineering Skills→
TOBIASpuchitoTOBIASpuchito

gsap-frameworks

Implement GSAP animations in Vue, Nuxt, and Svelte with lifecycle-safe cleanup.

Community
Intermediate
DanielV-94DanielV-94

gsap-timeline

Sequence GSAP tweens with timelines, position parameters, and labels.

Community
Intermediate
AlejandroFiginiAlejandroFigini

gsap-core

Create GSAP tweens and timelines for UI animations across frameworks.

Community
Advanced
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate