gsap-frameworks

Apply GSAP lifecycle patterns to Vue, Nuxt, and Svelte components.

Updated Apr 28, 2026

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

Ready to run

npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-frameworks-tututwo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/tututwo/heather-birthday-itenary/tree/main/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-frameworks-tututwo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables consistent, safe GSAP animation patterns inside component-based frameworks (Vue, Nuxt, Svelte, SvelteKit) while avoiding global scope leaks.

Core Features & Use Cases

Lifecycle integration: onMounted/onMount to start animations and onUnmounted/onDestroy to clean up.
Scoped selectors: using gsap.context to confine animations to a component root.
Cleanup guarantees: revert or kill animations on destroy to prevent leaks.
Guidance for React users: use gsap-react for React-specific patterns.

Quick Start

Create animations inside the component onMounted and revert them onUnmounted using a scoped container.

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 in Vue without causing memory leaks?▼

GSAP animations in Vue require cleaning up timelines on component destruction. You can prevent memory leaks by initiating animations inside onMounted and reverting or killing them during onUnmounted using scoped containers.

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

The best way to scope GSAP selectors in Svelte is using gsap.context. This confines animations to a component root, ensuring they remain isolated, revertible, and do not affect global scope.

Can I use gsap-react patterns for my Svelte or Vue animation project?▼

gsap-react patterns are specific to React. For Svelte or Vue projects, you need framework-aware GSAP patterns that integrate with onMount or onMounted lifecycles and use gsap.context for proper cleanup.

Why does my GSAP animation continue running after a Svelte component is destroyed?▼

GSAP animations persist after destruction if they are not explicitly killed. You must call revert or kill on your animations during the onDestroy lifecycle hook to prevent global scope leaks.

Does this GSAP animation approach work with Nuxt?▼

Yes, these GSAP patterns work with Nuxt. They enforce lifecycle integration and scoped selectors to ensure animations are revertible and safely contained within Vue and Nuxt component boundaries.

How do I orchestrate GSAP animations in SvelteKit?▼

To orchestrate GSAP animations in SvelteKit, initiate them inside the onMount lifecycle hook. Use gsap.context to confine selectors and revert animations on destroy to ensure no scope leaks.