skills.rest
Oatse
OatseCOMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

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

Updated May 23, 2026
Search Tags:#vue#svelte#animation#lifecycle#nuxt#gsap#scrolltrigger
One-click install
npx skills add https://github.com/Oatse/CWE-Automation --skill gsap-frameworks-oatse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/Oatse/CWE-Automation/tree/main/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/Oatse/CWE-Automation --skill gsap-frameworks-oatse

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations in component frameworks often leak memory, target wrong elements, or run before the DOM exists. This Skill provides correct patterns for creating animations after mount, scoping selectors to components, and reverting everything on unmount in Vue, Nuxt, and Svelte. ## Core Features & Use Cases - Lifecycle-Safe Animation: Create tweens and ScrollTriggers inside onMounted/onMount and revert them with ctx.revert() on unmount. - Scoped Selectors: Use gsap.context(callback, scope) so selectors like .box only match elements inside the current component. - Nuxt Composable: A typed useGSAP composable with plugin registration and lazy loading of infrequently used GSAP plugins to reduce bundle size. - Use Case: You are building a Vue 3 dashboard where cards animate in on scroll. Use this Skill to wrap the ScrollTrigger setup in gsap.context scoped to the component root and clean it up in onUnmounted. ## Quick Start Ask the assistant to add a GSAP scroll-triggered entrance animation to a Vue 3 component with proper mount and unmount handling.

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 animations inside onMounted using gsap.context with the container ref as scope, then call ctx.revert() in onUnmounted. This ensures the DOM exists before animating and all tweens and ScrollTriggers are cleaned up when the component unmounts.

How to add GSAP animations in Svelte with onMount?▼

Use bind:this to get the container element, create animations inside onMount wrapped in gsap.context with that element as scope, and return a cleanup function calling ctx.revert(). Svelte runs the returned function when the component is destroyed.

Should I use gsap-react or this approach for React projects?▼

For React, use the gsap-react skill with the useGSAP hook instead. This Skill covers Vue, Nuxt, Svelte, and other lifecycle-based frameworks, while React has its own dedicated patterns like contextSafe.

Why do my GSAP animations affect elements outside my component?▼

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

How do I lazy load GSAP plugins in Nuxt?▼

Create a useGSAP composable that registers core plugins like ScrollTrigger upfront and exposes a lazyLoadPlugin function using dynamic imports. This loads plugins like SplitText or MorphSVG only when a component actually needs them, reducing initial bundle size.

Why do GSAP animations fail when created in component setup?▼

Animations created before mounting target DOM nodes that do not exist yet. Always wait for onMounted in Vue or onMount in Svelte so the container ref points to a real element before creating tweens or ScrollTriggers.

Related Skills

Explore More Software Engineering Skills→
kartojalkartojal
11

gsap-frameworks

Implement lifecycle-aware GSAP animations in Vue and Svelte with scoped selectors.

Community
Intermediate
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
monoesmonoes
15

monomotion

Create live browser animations with GSAP timelines and seekable playback.

Official
Intermediate
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate