skills.rest
DITEKmax
DITEKmaxCOMMUNITY
Explore all skills by this author →
GitHub

gsap-frameworks

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

Updated Mar 28, 2026
Search Tags:#vue#svelte#animations#lifecycle#gsap#scrolltrigger#web-animation
One-click install
npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-frameworks-ditekmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-frameworks-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Providing framework-aware GSAP animation patterns with lifecycle-safe setup and cleanup for Vue, Nuxt, Svelte, SvelteKit, and other component-based apps. It emphasizes scoped selectors, context usage, and clean teardown to prevent leaks.

Core Features & Use Cases

  • Lifecycle-aware animation setup for modern frontend frameworks (Vue/Nuxt, Svelte/SvelteKit) with scoped selectors.
  • Safe cleanup using gsap.context and ctx.revert to ensure no leftover styles or memory leaks.
  • Guidance on ScrollTrigger integration and framework-specific hooks like onMounted/onUnmounted or the Svelte onMount lifecycle.

Quick Start

Create a GSAP context for your component and animate elements within its scoped root.

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 prevent memory leaks by scoping selectors within gsap.context during onMounted and calling ctx.revert in onUnmounted to ensure clean teardown and remove leftover styles.

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

Scoping GSAP selectors in Svelte components uses gsap.context to restrict animations to a specific root element, avoiding global selectors and ensuring proper cleanup via the Svelte onMount lifecycle.

Does GSAP ScrollTrigger work with SvelteKit and Vue lifecycle hooks?▼

GSAP ScrollTrigger works with SvelteKit and Vue by integrating within onMounted or onMount hooks, using gsap.context to scope instances and safely revert them during component teardown to avoid leaks.

Why do my GSAP animations leave leftover styles after component unmount?▼

GSAP animations leave leftover styles after unmount without lifecycle-aware cleanup; calling ctx.revert on a gsap.context instance during onUnmounted resets inline styles and removes ScrollTrigger references.

Can I use global selectors with GSAP in component-based frontend apps?▼

Global selectors should be avoided with GSAP in component-based apps; using gsap.context with a scoped root element ensures animations target only elements within that component, preventing unintended side effects.

Related Skills

Explore More Software Engineering Skills→
skyf0xxskyf0xx
26

gsap-frameworks

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

Community
Intermediate
meytalp-devmeytalp-dev

gsap-animation

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

Community
Advanced
Gekkos-techGekkos-tech
4

interface-polish

Apply CSS/JS micro-details for interactive states, transitions, and typography.

Official
Advanced
logeshv586-codelogeshv586-code

tailwindcss-animations

Provide animation and transition utilities for Tailwind CSS components.

Community
Intermediate