skills.rest
TOBIASpuchito
TOBIASpuchitoCOMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

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

Updated Jun 9, 2026
Search Tags:#vue#svelte#animation#lifecycle#nuxt#gsap#scrolltrigger
One-click install
npx skills add https://github.com/TOBIASpuchito/Citec --skill gsap-frameworks-tobiaspuchito
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/TOBIASpuchito/Citec/tree/main/citec-frontend/.claude/skills/gsap-frameworks
Command: npx skills add https://github.com/TOBIASpuchito/Citec --skill gsap-frameworks-tobiaspuchito

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. ## Core Features & Use Cases - Lifecycle Integration: 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 component. - Nuxt Composable: A typed useGSAP composable with plugin registration and lazy loading of rarely used plugins like SplitText or MorphSVG. - Use Case: You are building a Vue 3 page with scroll-triggered reveals. Use this Skill to wrap animations in gsap.context scoped to the component root and clean them up in onUnmounted. ## Quick Start Ask the AI to add a GSAP scroll-triggered fade-in 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 on destroy.

How to add GSAP animations in Svelte with cleanup?▼

Use onMount with bind:this on the container element, create animations inside gsap.context scoped to that element, and return () => ctx.revert() from onMount. Svelte runs the returned function when the component is destroyed.

Does GSAP work with Nuxt and SSR?▼

Yes, GSAP works with Nuxt when animations are created client-side in onMounted. Use a useGSAP composable to register plugins once and lazy load rarely used plugins like SplitText or MorphSVG to reduce initial bundle size.

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 subtree.

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

Use gsap-react for React projects, 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
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate
shadcn-labsshadcn-labs
1.1k

vercel-react-view-transitions

Implement native view transition animations in React and Next.js applications.

Official
Advanced