skills.rest
tututwo
tututwoCOMMUNITY
Explore all skills by this author →
Website𝕏@_tuyukunGitHub

gsap-frameworks

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

Updated Apr 28, 2026
Search Tags:#vue#cleanup#svelte#animation#lifecycle#gsap
One-click install
npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-frameworks-tututwo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
DanielV-94DanielV-94

gsap-frameworks

Manage GSAP animation lifecycles in Vue 3 and Svelte components.

Community
Intermediate
incubrainincubrain
78

motion

Automate hardware-accelerated animations in Vue 3 and Nuxt with motion-v.

Official
Intermediate
wubq511wubq511
6

gsap-frameworks

Integrate GSAP animations into Vue and Svelte components with lifecycle hooks.

Community
Intermediate
voidrotvoidrot

interaction-design

Guide microinteraction design with CSS spring physics and native browser APIs.

Community
Advanced