skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

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

1|Updated Aug 20, 2023
Search Tags:#vue#svelte#animation#lifecycle#nuxt#gsap#scrolltrigger
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill gsap-frameworks-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/gsap-frameworks
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill gsap-frameworks-imanlangaran

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 errors. - Scoped Selectors: Use gsap.context(callback, scope) so selectors like .box only match elements inside the current component. - Nuxt Plugin Management: A typed useGSAP composable that 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 per component; this Skill shows how to register ScrollTrigger once, scope animations per component, and clean up on route change. ## Quick Start Ask the assistant to add a GSAP scroll-triggered fade-in animation to a 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 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 is destroyed.

How to add GSAP animations in Svelte?▼

Use onMount with a bind:this reference to the root element, create animations inside gsap.context scoped to that element, and return a cleanup function calling ctx.revert(). Svelte runs the returned function 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 in only a few components or routes.

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

Global selectors like gsap.to('.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 component's 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, not React.

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
TOBIASpuchitoTOBIASpuchito

gsap-scrolltrigger

Implements scroll-linked animations, pinning, and scrubbing with the GSAP ScrollTrigger plugin.

Community
Intermediate
taxmaxitaxmaxi
1

animation-accessibility

Implements reduced-motion variants for web animations using CSS, Tailwind, and Framer Motion.

Official
Intermediate
xingBaGanxingBaGan

gsap-react

Animate React components with GSAP using the useGSAP hook.

Community
Intermediate