skills.rest
DanielV-94
DanielV-94COMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

Manage GSAP animation lifecycles in Vue 3 and Svelte components.

Updated Apr 13, 2026
Search Tags:#context#vue#svelte#animation#gsap#scrolltrigger
One-click install
npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-frameworks-danielv-94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/DanielV-94/rg-medium/tree/main/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-frameworks-danielv-94

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many developers struggle to integrate GSAP animations correctly within component‑based frameworks like Vue and Svelte, often creating memory leaks or unscoped selectors that affect the entire page.

Core Features & Use Cases

  • Lifecycle‑aware animation: Initialize GSAP after the component mounts (onMounted / onMount) and clean up on unmount/destroy.
  • Scoped selectors: Use gsap.context with a component root to limit animation targets.
  • ScrollTrigger support: Include ScrollTrigger creation within the same context for automatic cleanup.
  • Framework examples: Ready‑to‑copy snippets for Vue 3 (Composition API and script‑setup) and Svelte demonstrating proper setup and teardown.

Quick Start

Request the skill to generate a Vue 3 composition‑API snippet that animates a .box element on mount and reverts it 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 lifecycle-aware setup using gsap.context to scope selectors and automatic cleanup on component unmount, preventing memory leaks and unscoped DOM targeting.

How do I scope GSAP ScrollTrigger animations to a specific Svelte component?▼

You scope GSAP ScrollTrigger animations in Svelte by using gsap.context during onMount, which limits selector targets to the component root and ensures automatic cleanup on destroy.

Does GSAP context automatically clean up ScrollTrigger instances when a Vue component unmounts?▼

Yes, wrapping ScrollTrigger creation inside gsap.context within the Vue 3 Composition API ensures that all associated ScrollTrigger instances are automatically reverted and cleaned up on component unmount.

What is the best way to initialize GSAP animations after a Svelte component mounts?▼

The best way to initialize GSAP animations in Svelte is inside the onMount lifecycle hook, using gsap.context to manage scoped selectors and setting up teardown logic for unmounting.

Why do my GSAP animations affect elements outside of my Vue or Svelte component?▼

Unscoped GSAP animations affect external elements because global selectors target the entire page, which is resolved by applying gsap.context with a component root ref to limit animation targets.

Do I need to install the GSAP core library and ScrollTrigger plugin separately to animate Vue components?▼

Yes, you need the GSAP core library and the ScrollTrigger plugin installed to handle component lifecycle mounting, scoped selector contexts, and automatic cleanup in Vue 3 and Svelte.

Related Skills

Explore More Software Engineering Skills→
woxiangyangzhimaowoxiangyangzhimao
3

gsap-frameworks

Integrate GSAP animations into Vue and Svelte component lifecycles.

Community
Advanced
DITEKmaxDITEKmax

gsap-frameworks

Integrate GSAP animations with lifecycle-aware cleanup for Vue and Svelte components.

Community
Advanced
meytalp-devmeytalp-dev

gsap-animation

Animate web UI elements with GSAP timelines, ScrollTrigger, and stagger effects.

Community
Advanced
HardyLiu6HardyLiu6

gsap-frameworks

Animate components in Vue, Svelte, and other non-React frameworks.

Community
Intermediate