gsap-frameworks

Manage GSAP animation lifecycles and scoped selectors in Vue and Svelte components.

26|4|Updated Jul 21, 2026

Search Tags:#frontend #vue #svelte #animation #lifecycle #gsap

Ready to run

npx skills add https://github.com/skyf0xx/hedgehog --skill gsap-frameworks-skyf0xx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/skyf0xx/hedgehog/tree/main/skills/GSAP/gsap-frameworks
Command: npx skills add https://github.com/skyf0xx/hedgehog --skill gsap-frameworks-skyf0xx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the common issue of memory leaks and animation glitches when using GSAP in component-based frameworks like Vue and Svelte by enforcing proper lifecycle management and scope isolation.

Core Features & Use Cases

Lifecycle Management: Ensures animations are created only after the DOM is ready and properly cleaned up on unmount to prevent memory leaks.
Scoped Selectors: Prevents animation conflicts by restricting GSAP selectors to the specific component subtree.
Use Case: Use this when building complex UI transitions in Vue or Svelte to ensure animations remain performant and do not persist after a component is destroyed.

Quick Start

Ask the AI to implement a GSAP animation in your Vue or Svelte component using the gsap-frameworks skill to ensure proper lifecycle cleanup and scoped selectors.

Frequently Asked Questions about gsap-frameworks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Why do my GSAP animations cause memory leaks in Vue and Svelte?▼

GSAP animations cause memory leaks in Vue and Svelte when they are not properly cleaned up during the component unmount phase. Enforcing context reversion upon component unmount ensures complete animation cleanup and prevents these reactive memory leaks.

How do I scope GSAP selectors to a specific component subtree?▼

To scope GSAP selectors to a specific component subtree, you must enforce strict DOM scoping within your reactive application. This restricts animation selectors to the specific component subtree, preventing global selector collisions and animation conflicts.

When should I initialize GSAP tweens and ScrollTriggers in a component framework?▼

You should initialize GSAP tweens and ScrollTriggers during the component mounted phase. Creating animations only after the DOM is ready ensures the elements exist and prevents rendering glitches in frameworks like Vue and Svelte.

What is the best way to manage GSAP animation lifecycles in reactive applications?▼

The best way to manage GSAP animation lifecycles in reactive applications is to facilitate creation during the mounted phase and ensure complete cleanup via context reversion upon unmount. This prevents animation glitches and memory leaks.

Do I need scoped selectors for GSAP animations in Vue and Svelte?▼

Yes, you need scoped selectors for GSAP animations in Vue and Svelte to prevent animation conflicts. Restricting GSAP selectors to the specific component subtree isolates the animations and prevents global selector collisions across your application.