gsap-frameworks

Name: gsap-frameworks
Availability: InStock
Author: scarletfish

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

Updated Jun 8, 2026

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

Ready to run

npx skills add https://github.com/ScarletFish/MyAnimeDock --skill gsap-frameworks-scarletfish

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve?

This Skill resolves the common issues of memory leaks, scope pollution, and lifecycle mismanagement when integrating GSAP animations into component-based frameworks like Vue and Svelte.

Core Features & Use Cases

Lifecycle Management: Ensures animations are created only after the DOM is ready and properly cleaned up upon component destruction.
Scoped Selectors: Prevents animation selectors from leaking outside the component by utilizing GSAP context scoping.
Use Case: Use this when building complex UI transitions in Vue or Svelte to ensure animations remain performant and do not persist after a user navigates away from a page.

Quick Start

Use the gsap-frameworks skill to implement a staggered entrance animation for a list of items within a Vue component using onMounted and context cleanup.

Frequently Asked Questions about gsap-frameworks

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

FAQPage Schema

How do I prevent GSAP animation memory leaks in Vue and Svelte components?▼

GSAP animation memory leaks in Vue and Svelte occur when animations are not cleaned up on component unmount. Using gsap.context manages animation lifecycles and ensures proper cleanup, preventing scope pollution and persistent background animations.

How to scope GSAP selectors to a specific Svelte or Vue component?▼

Scoping GSAP selectors to a specific Svelte or Vue component is achieved by utilizing gsap.context. This prevents animation selectors from leaking outside the component boundary and affecting unintended DOM elements globally.

When do I need to use gsap.context for frontend animations?▼

You need to use gsap.context for frontend animations when integrating GSAP into component-based frameworks like Vue or Svelte. It provides DOM-aware animation initialization and scoped selector targeting to maintain memory safety.

Does GSAP work with Vue onMounted and Svelte lifecycle hooks for DOM animations?▼

GSAP works with Vue onMounted and Svelte lifecycle hooks by ensuring animations are created only after the DOM is ready. This lifecycle management guarantees robust, memory-safe animation initialization and proper teardown.

What is the best way to integrate GSAP UI transitions in component-based frameworks?▼

The best way to integrate GSAP UI transitions in component-based frameworks is by managing animation lifecycles and selector scoping. This approach ensures complex UI transitions remain performant and clean up upon user navigation.

Why do my GSAP animations persist after navigating away in Vue?▼

GSAP animations persist after navigating away in Vue due to missing lifecycle cleanup on component destruction. Implementing gsap.context during component unmount properly reverts and destroys animations to prevent this scope pollution.