skills.rest
ZanebonoAlter
ZanebonoAlterCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-frameworks

Implement GSAP animations in Vue, React, or Svelte with correct lifecycle management, scoped selectors, and cleanup.

19|4|Updated Jan 11, 2026
Search Tags:#vue#cleanup#svelte#gsap#composition-api#onMounted#scoped-selectors
One-click install
npx skills add https://github.com/ZanebonoAlter/Syntopica --skill gsap-frameworks-zanebonoalter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/ZanebonoAlter/Syntopica/tree/main/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/ZanebonoAlter/Syntopica --skill gsap-frameworks-zanebonoalter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help developers implement GSAP animations in non-React frameworks (Vue, Nuxt, Svelte, SvelteKit) with correct lifecycle handling, scoped selectors, and reliable cleanup.

Core Features & Use Cases

  • Framework-specific patterns for Vue 3 (Composition API and script setup), Nuxt 4, and Svelte, including onMounted/onUnmounted lifecycle usage.
  • Guidance on scoping selectors using gsap.context(...) to avoid cross-component side effects.
  • Cleanup strategy: revert animations and ScrollTriggers on component destroy, ensuring no leaks.
  • Reusable patterns and examples to accelerate animation work in multi-framework projects.

Quick Start

Implement GSAP animations in a Vue component by wrapping your tweens in gsap.context and cleaning up with ctx.revert() on 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 in Vue 3 without causing memory leaks?▼

GSAP animations in Vue 3 require proper lifecycle handling to prevent memory leaks. You must wrap tweens in gsap.context for scoped selectors and call ctx.revert() inside onUnmounted to ensure reliable cleanup.

Why does my GSAP animation affect elements outside the current Svelte component?▼

GSAP animations affect external elements when using global selectors. Scope your selectors by wrapping tweens in gsap.context within onMounted to restrict side effects to the current Svelte component instance.

What is the best way to clean up ScrollTriggers in Nuxt 4 components?▼

Cleaning up ScrollTriggers in Nuxt 4 requires calling ctx.revert() during the component destroy lifecycle. This reverts animations and registered ScrollTriggers automatically, preventing cross-component side effects.

Does GSAP work with the Vue Composition API and script setup?▼

GSAP works with Vue Composition API and script setup by applying lifecycle-aware patterns. Initialize your gsap.context inside onMounted and perform cleanup using ctx.revert() within the onUnmounted hook.

How do I scope GSAP selectors to prevent cross-component side effects?▼

Scoping GSAP selectors requires using gsap.context to contain animations within a specific component. This lifecycle-aware pattern prevents global selector leaks and ensures cross-component side effects are avoided.

When should I use gsap.context in SvelteKit projects?▼

GSAP context in SvelteKit projects should be used whenever adding animations to components. Wrap your tweens in gsap.context during onMounted and call ctx.revert() on destroy to ensure reliable cleanup and avoid leaks.

Related Skills

Explore More Software Engineering Skills→
nnececnnecec
2

gsap-frameworks

Apply GSAP animations in Vue and Svelte with lifecycle cleanup.

Community
Intermediate
James-GamboaJames-Gamboa

gsap-frameworks

Coordinate GSAP animations in Vue, Svelte, and lifecycle-based frameworks.

Community
Advanced
yequdesuyequdesu

gsap-frameworks

Animate UI components in Vue, Svelte, and non-React frameworks with GSAP lifecycle hooks.

Community
Intermediate
zengxiaoqizengxiaoqi
1

css-animations

Create and manage CSS keyframe animations with controlled timing and iteration settings.

Community
Basic