gsap-frameworks

To scope GSAP animations in Vue or Svelte, use gsap.context within the component's mounted hook, passing the component root element, which confines selectors to that component and prevents animation side effects across the page.

GSAP animations break or leak in Svelte when they are not properly scoped or cleaned up. You must initialize them inside onMount using gsap.context and revert the context during the destroy lifecycle to remove lingering animation references.

The best way to scope GSAP selectors is to use gsap.context. By wrapping your animation timeline in a context linked to a specific component root element, you ensure selectors only target elements within that component's DOM tree.

Yes, GSAP works with Nuxt and other component-based frameworks. It requires lifecycle-aware implementation patterns, ensuring animations execute after DOM mounting and are reverted during component unmounting to avoid side effects.

You should use gsap.context for frontend animations whenever you need to scope animations to a specific component root and automatically clean them up on unmount, which is essential for preventing memory leaks in component-based applications.