gsap-frameworks

GSAP context allows scoping animations to a specific component root element by passing a selector or element reference. This isolates animation effects within Vue or Svelte components, preventing selectors from leaking into unrelated DOM nodes.

GSAP animations cause memory leaks when component unmount lifecycle hooks do not trigger cleanup. Calling ctx.revert() inside onUnmounted or onDestroy properly resets inline styles and kills ScrollTriggers, preventing lingering animation artifacts.

To integrate ScrollTrigger with GSAP context in Nuxt, initialize the ScrollTrigger inside the gsap.context callback during onMounted. This ensures the ScrollTrigger instance is included in the context scope and properly cleaned up when ctx.revert() is called.

Using gsap.context in Svelte onMount is required for lifecycle-aware animations. It scopes selectors to the component root and provides a cleanup mechanism via ctx.revert() inside the onDestroy hook to prevent memory leaks.

The best way to structure GSAP in Vue 3 script setup is to initialize gsap.context within the onMounted hook and store the context reference. Then, call the revert method on that context reference inside the onUnmounted hook to ensure complete animation cleanup.