skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations in component frameworks often leak memory, target elements outside the component, or run before the DOM exists. This Skill provides correct patterns for creating, scoping, and cleaning up GSAP tweens and ScrollTriggers in Vue, Nuxt, and Svelte. ## Core Features & Use Cases - Lifecycle-Safe Animation: Create tweens inside onMounted/onMount and revert them with ctx.revert() on unmount to prevent leaks and detached-node animations. - Scoped Selectors: Use gsap.context(callback, scope) so selectors like .box only match elements inside the component root. - Nuxt Plugin Management: A typed useGSAP composable registers plugins once and lazy-loads rarely used plugins like SplitText or MorphSVG to reduce bundle size. - Use Case: A developer building a Nuxt landing page needs scroll-triggered reveals that clean up on route change; this Skill supplies the composable, context scoping, and revert pattern. ## Quick Start Add GSAP scroll animations to my Vue 3 component with proper 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 animations inside onMounted using gsap.context(callback, container.value) so selectors are scoped to the component root. In onUnmounted, call ctx.revert() to kill all tweens and ScrollTriggers and revert inline styles.

How to add GSAP animations in Svelte with cleanup?▼

Use onMount with a bind:this reference to the container element, then create animations inside gsap.context scoped to that element. Return a cleanup function from onMount that calls ctx.revert() so animations are killed when the component is destroyed.

Can I lazy load GSAP plugins in Nuxt?▼

Yes, a useGSAP composable can register core plugins like ScrollTrigger upfront and dynamically import others such as SplitText or MorphSVG on demand. This reduces initial bundle size for plugins used on only a few routes.

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

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.

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 contextSafe patterns. This skill targets Vue, Nuxt, Svelte, and other lifecycle-based frameworks instead.

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
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate
oguzhan18oguzhan18
6

angular-animations

Implement Angular 21+ animations with animateEnter and animateLeave APIs.

Community
Intermediate