gsap-frameworks

Name: gsap-frameworks
Availability: InStock
Author: DITEKmax

Integrate GSAP animations with lifecycle-aware cleanup for Vue and Svelte components.

Updated Mar 28, 2026

Search Tags:#vue #svelte #animations #lifecycle #gsap #scrolltrigger #web-animation

Ready to run

npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-frameworks-ditekmax

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-frameworks-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Providing framework-aware GSAP animation patterns with lifecycle-safe setup and cleanup for Vue, Nuxt, Svelte, SvelteKit, and other component-based apps. It emphasizes scoped selectors, context usage, and clean teardown to prevent leaks.

Core Features & Use Cases

Lifecycle-aware animation setup for modern frontend frameworks (Vue/Nuxt, Svelte/SvelteKit) with scoped selectors.
Safe cleanup using gsap.context and ctx.revert to ensure no leftover styles or memory leaks.
Guidance on ScrollTrigger integration and framework-specific hooks like onMounted/onUnmounted or the Svelte onMount lifecycle.

Quick Start

Create a GSAP context for your component and animate elements within its scoped root.

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 animations in Vue without causing memory leaks?▼

GSAP animations in Vue prevent memory leaks by scoping selectors within gsap.context during onMounted and calling ctx.revert in onUnmounted to ensure clean teardown and remove leftover styles.

What is the best way to scope GSAP selectors in Svelte components?▼

Scoping GSAP selectors in Svelte components uses gsap.context to restrict animations to a specific root element, avoiding global selectors and ensuring proper cleanup via the Svelte onMount lifecycle.

Does GSAP ScrollTrigger work with SvelteKit and Vue lifecycle hooks?▼

GSAP ScrollTrigger works with SvelteKit and Vue by integrating within onMounted or onMount hooks, using gsap.context to scope instances and safely revert them during component teardown to avoid leaks.

Why do my GSAP animations leave leftover styles after component unmount?▼

GSAP animations leave leftover styles after unmount without lifecycle-aware cleanup; calling ctx.revert on a gsap.context instance during onUnmounted resets inline styles and removes ScrollTrigger references.

Can I use global selectors with GSAP in component-based frontend apps?▼

Global selectors should be avoided with GSAP in component-based apps; using gsap.context with a scoped root element ensures animations target only elements within that component, preventing unintended side effects.