skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

gsap-frameworks

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

1|Updated Aug 17, 2026
Search Tags:#vue#svelte#animation#lifecycle#Nuxt#gsap#ScrollTrigger
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill gsap-frameworks-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/gsap-frameworks
Command: npx skills add https://github.com/NalinDalal/skillset --skill gsap-frameworks-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations in component frameworks like Vue, Nuxt, and Svelte often leak memory, target wrong elements, or fail because tweens run before the DOM exists. This Skill provides correct lifecycle patterns for creating, scoping, and cleaning up GSAP animations in non-React frameworks. ## Core Features & Use Cases - Lifecycle-Safe Animation Setup: Create tweens and ScrollTriggers inside onMounted/onMount and revert them via gsap.context() on unmount to prevent leaks. - Scoped Selectors: Pass a container ref to gsap.context() so selectors like .box only match elements within the component subtree. - Nuxt 4 Composable: A typed useGSAP composable with plugin registration and lazy loading of infrequently used GSAP plugins to reduce bundle size. - Use Case: When building a Vue 3 dashboard with scroll-triggered reveals, use this Skill to wire ScrollTrigger inside gsap.context(container) and call ctx.revert() in onUnmounted so navigating away leaves no orphaned animations. ## Quick Start Add a GSAP fade-in animation to my Vue 3 component that cleans up properly when the component unmounts.

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 with Vue 3 Composition API?▼

Create animations inside onMounted using gsap.context(callback, container.value) so selectors are scoped to the component root. Store the context and call ctx.revert() in onUnmounted to kill tweens, ScrollTriggers, and revert inline styles.

How to add GSAP animations in Svelte components?▼

Use onMount to run GSAP after the DOM is ready, bind the root element with bind:this, and pass it to gsap.context for scoping. Return a cleanup function from onMount that calls ctx.revert() so animations are killed when the component is destroyed.

Does GSAP work with Nuxt 4 and SSR?▼

Yes, GSAP works with Nuxt 4 when animations are created client-side in onMounted. A useGSAP composable can register plugins once and lazy-load rarely used plugins like SplitText or MorphSVG to keep the initial bundle small.

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

Selector strings like .box without a scope 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.

When should I use gsap-react instead of this approach?▼

Use the gsap-react skill for React projects, which relies on the useGSAP hook and contextSafe patterns. This Skill covers Vue, Nuxt, Svelte, and SvelteKit where lifecycle hooks like onMounted and onMount handle setup and cleanup.

Related Skills

Explore More Software Engineering Skills→
TOBIASpuchitoTOBIASpuchito

gsap-frameworks

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

Community
Intermediate
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
nexu-ionexu-io
93.2k

gsap-timeline

Sequence complex web animations using GSAP timeline methods and position parameters.

Official
Intermediate
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate