gsap-frameworks

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

Updated Aug 23, 2026

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

Ready to run

npx skills add https://github.com/Adham7843/SaaS-Security-Auditor --skill gsap-frameworks-adham7843

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/Adham7843/SaaS-Security-Auditor/tree/main/agents/design-factory/.opencode/skills/06-GSAP/gsap-frameworks
Command: npx skills add https://github.com/Adham7843/SaaS-Security-Auditor --skill gsap-frameworks-adham7843

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps developers efficiently manage GSAP animations in Vue, Svelte, and other non-React frameworks, ensuring optimal performance and avoiding common pitfalls.

Core Features & Use Cases

Lifecycle Management: Ensures GSAP animations are created and cleaned up at the right times, preventing memory leaks.
Scoped Selectors: Limits animations to component-specific elements, avoiding conflicts with other DOM elements.
ScrollTrigger Integration: Facilitates smooth scroll-based animations without additional setup.
Use Case: When building a Vue or Svelte application that requires complex animations, this Skill can help manage the GSAP animations lifecycle, ensuring they are created and destroyed appropriately.

Quick Start

To animate a Vue component with GSAP, use the 'gsap-frameworks' skill and run the following command: onMounted(() => gsap.to('.element', { duration: 1, x: 100 }));

Frequently Asked Questions about gsap-frameworks

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

FAQPage Schema

How do I manage GSAP animation lifecycle in Vue to prevent memory leaks?▼

Manage GSAP animation lifecycle in Vue by creating animations in onMounted and destroying them on unmount. This ensures animations are cleaned up at the right times, preventing memory leaks and optimizing performance.

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

Scoping GSAP animations to Svelte components involves using scoped selectors to limit animations to component-specific elements. This avoids conflicts with other DOM elements and ensures animations target the correct nodes.

Does GSAP ScrollTrigger integration work with Vue and Svelte?▼

GSAP ScrollTrigger integration works with Vue and Svelte by facilitating smooth scroll-based animations without additional setup. It manages the creation and destruction of scroll triggers to prevent memory leaks.

Why do my GSAP animations break when navigating between Svelte components?▼

GSAP animations break during Svelte component navigation if they are not destroyed appropriately during the component lifecycle. Proper lifecycle management ensures animations are created and cleaned up at the right times to prevent memory leaks.

Can I use this approach to optimize GSAP animations in non-React frameworks?▼

You can optimize GSAP animations in non-React frameworks like Vue and Svelte using this approach. It provides scoped selectors and scroll trigger integration to manage animation lifecycles and prevent memory leaks.