gsap-frameworks

GSAP with Vue 3 Composition API uses onMounted to initialize animations and onUnmounted for cleanup. This lifecycle-safe pattern uses gsap.context to scope selectors to the component root, preventing animation leaks and side effects when components unmount.

gsap.context is a scoping mechanism for GSAP animations that restricts selector searches to a specific component root. You need it during framework animation tasks to isolate animations, prevent selector leaks across components, and easily revert or cleanup animations on component unmount.

GSAP works with Svelte and SvelteKit by applying lifecycle-safe animation patterns using onMount for initialization and onDestroy for cleanup. This approach ensures scoped selectors prevent side effects and properly revert animations when the Svelte component is destroyed.

GSAP animations cause memory leaks in Nuxt when component unmount lifecycles lack proper cleanup. Applying gsap.context scoping during onMounted and calling its revert method during onUnmounted ensures all animations are cleaned up, preventing leaks and side effects.

The best way to scope GSAP selectors is using gsap.context. It restricts GSAP selector text to a specific component root element, preventing animations from accidentally targeting elements outside the component and ensuring safe cleanup on unmount.

No specific GSAP plugin is required for Nuxt 4 or Svelte base animations. The implementation relies on native framework lifecycle hooks combined with gsap.context for scoping and cleanup, while plugin guidance is provided for loading specialized GSAP plugins when needed.