Does this work with Nuxt 4?

Yes, it includes specific patterns for Nuxt 4, including a reusable composable for plugin registration and lazy-loading methods.

When should I initialize my GSAP animations?

Animations should be initialized within the framework's 'mounted' lifecycle hook (like onMounted in Vue or onMount in Svelte) to ensure DOM elements exist.

Can I use this skill for React?

No, this skill is specifically for Vue, Svelte, and other non-React frameworks. You should use the gsap-react skill for React-specific patterns like the useGSAP hook.

Why is gsap.context() important in these frameworks?

It allows for easy cleanup by reverting all animations at once and ensures selectors are scoped to the component's root, preventing global style conflicts.

GSAP for Vue & Svelte

Name: GSAP for Vue & Svelte
Author: greensock

bygreensock

•

2,963

•

Design Tools

Implements high-performance GSAP animations in Vue, Svelte, and Nuxt using lifecycle-aware best practices for cleanup and scoping.

This skill provides comprehensive guidance for integrating the GreenSock Animation Platform (GSAP) into component-based frameworks like Vue, Nuxt, and Svelte. It ensures AI-generated code correctly handles framework lifecycles, utilizes gsap.context() for automatic cleanup and selector scoping, and prevents memory leaks during component unmounting. Whether you're building interactive Nuxt 4 applications or lightweight Svelte components, this skill enables robust, production-grade animations while avoiding common pitfalls like global selector collisions and orphaned ScrollTriggers.

Key Features

01Nuxt 4 composable and lazy-loading patterns

02Automatic selector scoping with gsap.context()

03Lifecycle-aware animation setup and cleanup

04ScrollTrigger management and refresh patterns

05Svelte and Vue 3 (Composition API) implementation guides

062,963 GitHub stars

Use Cases

01Implementing scroll-driven animations in Nuxt 4 applications

02Building animated UI components in Vue or Svelte projects

03Optimizing GSAP plugin loading for performance-sensitive web apps

Key Features

01Nuxt 4 composable and lazy-loading patterns

02Automatic selector scoping with gsap.context()

03Lifecycle-aware animation setup and cleanup

04ScrollTrigger management and refresh patterns

05Svelte and Vue 3 (Composition API) implementation guides

062,963 GitHub stars

Use Cases

01Implementing scroll-driven animations in Nuxt 4 applications

02Building animated UI components in Vue or Svelte projects

03Optimizing GSAP plugin loading for performance-sensitive web apps