gsap-frameworks

Name: gsap-frameworks
Availability: InStock
Author: 47thtechcorner

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

21|9|Updated Jun 22, 2026

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

Ready to run

npx skills add https://github.com/47thtechcorner/RayCodes_OpenMontage --skill gsap-frameworks-47thtechcorner

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/47thtechcorner/RayCodes_OpenMontage/tree/main/openmontage_engine/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/47thtechcorner/RayCodes_OpenMontage --skill gsap-frameworks-47thtechcorner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve?

This skill resolves common issues with GSAP integration in component-based frameworks, specifically preventing memory leaks, animation glitches, and scope conflicts during component lifecycle transitions.

Core Features & Use Cases

Lifecycle Management: Provides standardized patterns for initializing animations on mount and cleaning them up on unmount to ensure performance.
Scoped Selectors: Implements context-based scoping to ensure animations only target elements within the specific component instance.
Use Case: Use this skill when building complex UI transitions in Vue or Svelte to ensure that ScrollTriggers and tweens are properly destroyed when a user navigates away from a page.

Quick Start

Apply the gsap-frameworks skill to implement a clean animation lifecycle in my current Vue component using onMounted and onUnmounted hooks.

Frequently Asked Questions about gsap-frameworks

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

FAQPage Schema

How do I clean up GSAP animations when a Vue or Svelte component unmounts?▼

To clean up GSAP animations on component unmount, use gsap.context to scope tweens and revert them during the unmounting lifecycle hook. This prevents memory leaks by ensuring ScrollTriggers and animations are destroyed when navigation occurs.

Why does my GSAP animation target elements outside its Vue or Svelte component?▼

GSAP animations target elements outside a component due to global scope pollution. Using gsap.context implements scoped selector execution, restricting animation targets to elements within the specific component instance to prevent scope conflicts.

What is the best way to manage GSAP animation lifecycles in component-based frameworks?▼

The best way to manage GSAP animation lifecycles is initializing animations on mount and applying gsap.context for automatic cleanup on unmount. This ensures technical compliance with framework-specific hooks to prevent animation glitches.

Does gsap.context work with Svelte and Vue lifecycle hooks?▼

Yes, gsap.context works with Vue and Svelte lifecycle hooks by facilitating robust, memory-safe animations during component transitions. It leverages onMounted and onUnmounted hooks to ensure animations are properly initialized and destroyed.

How do I prevent memory leaks with ScrollTrigger in Vue or Svelte?▼

Prevent ScrollTrigger memory leaks by wrapping animation logic in gsap.context and calling its revert method during component unmounting. This ensures ScrollTriggers are properly destroyed when a user navigates away from the page.

Can I use GSAP for complex UI transitions in Svelte without causing animation leaks?▼

Yes, you can use GSAP for complex UI transitions in Svelte without leaks by leveraging gsap.context for automatic cleanup. This ensures technical compliance with lifecycle hooks to prevent global scope pollution during transitions.