gsap-frameworks

Manage GSAP animation lifecycle and scoped selectors for Vue and Svelte components.

8|4|Updated Jul 31, 2025

Search Tags:#animation #Vue #Svelte #GSAP #component lifecycle

Ready to run

npx skills add https://github.com/aesthezel/venezuela-juega --skill gsap-frameworks-aesthezel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/aesthezel/venezuela-juega/tree/main/.junie/skills/gsap-frameworks
Command: npx skills add https://github.com/aesthezel/venezuela-juega --skill gsap-frameworks-aesthezel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, vue, svelte, and includes scripts (resource) components.

What problem does it solve?

This Skill streamlines the integration of GSAP animations into Vue, Svelte, and other frameworks, eliminating the complexities of manual GSAP implementation.

Core Features & Use Cases

Framework-Specific GSAP: Offers tailored solutions for Vue and Svelte, ensuring GSAP animations work seamlessly within the context of these frameworks.
Lifecycle Management: Provides lifecycle hooks to ensure GSAP animations are created and cleaned up appropriately.
Scoping Selectors: Ensures that animations only affect elements within the targeted component, preventing conflicts with other page elements.

Quick Start

Run GSAP animations on component mount using onMounted in Vue or onMount in Svelte, and clean up on component 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 animations within the Vue component lifecycle?▼

To use GSAP animations within the Vue component lifecycle, initialize them on component mount and ensure proper cleanup on unmount. This integration handles scoping and lifecycle management automatically to prevent memory leaks.

What is the best way to manage GSAP animation cleanup in Svelte?▼

Managing GSAP animation cleanup in Svelte requires tying animations to the component lifecycle. By using the onMount hook, you can ensure animations are properly created and safely destroyed when the component unmounts.

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

GSAP animations affect elements outside the targeted component when selectors are not properly scoped. Using a framework integration that provides scoping selectors restricts animations to the specific component, preventing conflicts with other page elements.

Does this GSAP integration work with both Vue and Svelte frameworks?▼

Yes, this GSAP integration works with both Vue and Svelte frameworks. It offers tailored solutions for each, ensuring GSAP animations work seamlessly within their specific component lifecycle and reactivity contexts.

How to prevent memory leaks when running GSAP animations on component unmount?▼

To prevent memory leaks when running GSAP animations on component unmount, you must explicitly kill the associated tweens and timelines. Framework lifecycle management handles this cleanup process automatically when the component is destroyed.