skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

Implements GSAP animations in Vue and Svelte components with lifecycle-safe setup and cleanup.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations in component frameworks like Vue and Svelte 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 the component, and reverting everything on unmount. ## Core Features & Use Cases - Lifecycle-Safe Setup: Create tweens and ScrollTriggers inside onMounted (Vue) or onMount (Svelte) so DOM nodes exist before animation. - Scoped Selectors: Use gsap.context(callback, scope) with a container ref so selectors like .box only match elements inside the component. - Guaranteed Cleanup: Call ctx.revert() in onUnmounted or the onMount return function to kill tweens and ScrollTriggers and revert inline styles. - Use Case: You are building a Nuxt page with staggered entrance animations and scroll-triggered reveals. This Skill shows you how to wire GSAP into the component lifecycle so animations work on first render and clean up when navigating away. ## Quick Start Ask the AI to add a GSAP stagger animation to a Vue 3 component using gsap.context with proper onMounted setup and onUnmounted cleanup.

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 your container ref as the scope argument, then call ctx.revert() in onUnmounted. This ensures DOM nodes exist before animating and all tweens and ScrollTriggers are cleaned up on destroy.

How to run GSAP animations in Svelte components?▼

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

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

Use the gsap-react skill for React, which covers the useGSAP hook and gsap.context patterns specific to React. The gsap-frameworks skill targets Vue, Nuxt, Svelte, and SvelteKit, which use onMounted and onMount lifecycles instead.

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

Selector strings like .box match globally when no scope is provided. Pass your container element as the second argument to gsap.context so selectors only search within that component subtree and never affect other instances.

Do ScrollTriggers get cleaned up with gsap.context revert?▼

Yes, ScrollTriggers created inside a gsap.context callback are tracked and killed when ctx.revert() is called. Create them inside the same context as your tweens and call ScrollTrigger.refresh() after layout changes.

Related Skills

Explore More Software Engineering Skills→
TOBIASpuchitoTOBIASpuchito

gsap-frameworks

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

Community
Intermediate
ayofemiadeayofemiade

gsap-scrolltrigger

Create scroll-driven web animations with GSAP and the ScrollTrigger plugin.

Community
Advanced
HoussamMrabetHoussamMrabet

gsap-frameworks

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

Community
Intermediate
xingBaGanxingBaGan

gsap-react

Animate React components with GSAP using the useGSAP hook.

Community
Intermediate