skills.rest
Gito125
Gito125COMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-frameworks

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

Updated May 4, 2026
Search Tags:#frontend#vue#svelte#animation#lifecycle#gsap#scrolltrigger
One-click install
npx skills add https://github.com/Gito125/gideon_portfolio --skill gsap-frameworks-gito125
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/Gito125/gideon_portfolio/tree/main/.github/skills/gsap-frameworks
Command: npx skills add https://github.com/Gito125/gideon_portfolio --skill gsap-frameworks-gito125

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations in Vue, Nuxt, Svelte, and SvelteKit often break because tweens are created before the DOM exists, selectors leak outside the component, or ScrollTriggers are never killed on unmount, causing memory leaks and stale animations. ## Core Features & Use Cases - Lifecycle-Safe Setup: Creates tweens and ScrollTriggers inside onMounted (Vue) or onMount (Svelte) so the DOM is guaranteed to exist. - Scoped Selectors: Uses gsap.context(callback, scope) with a container ref so selectors like .box only match elements inside the component. - Automatic Cleanup: Calls ctx.revert() in onUnmounted or the onMount return function to kill all animations and ScrollTriggers and revert inline styles. - Use Case: A developer building a Nuxt landing page needs scroll-triggered reveals on multiple card components; this Skill provides the exact pattern to scope, animate, and clean up each instance without leaks. ## Quick Start Ask the AI 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 with cleanup?▼

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

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

Running gsap.to with a selector string and no scope matches elements across the entire document. Pass the component's container element as the second argument to gsap.context so selectors only search within that subtree.

Does gsap.context clean up ScrollTrigger instances?▼

Yes, ScrollTriggers created inside a gsap.context callback are tracked by that context. Calling ctx.revert() kills them along with all tweens and reverts inline styles, so no separate ScrollTrigger cleanup is needed.

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 React-specific context patterns. This skill targets Vue, Nuxt, Svelte, SvelteKit, and other lifecycle-based frameworks.

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
ZanebonoAlterZanebonoAlter
19

gsap-core

Create GSAP tweens, timelines, staggered effects, and ScrollTrigger animations.

Community
Intermediate
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate