gsap-frameworks

Prevent GSAP memory leaks in Vue and Svelte by creating animations inside onMounted/onMount and reverting them in onUnmounted/onDestroy, using gsap.context to scope and clean up selectors within the component lifecycle.

GSAP ScrollTrigger animations run prematurely when initialized outside lifecycle hooks. Execute GSAP setup inside Vue's onMounted or Svelte's onMount to ensure the component DOM is fully rendered before targeting elements and registering plugins.

gsap.context is used to scope GSAP animations to a specific component's root element, confining selector text lookups to that subtree and enabling centralized cleanup of all associated animations when the component unmounts.

Yes, you can use GSAP with Nuxt and SvelteKit without selector conflicts by wrapping your animation logic in gsap.context, which restricts selector queries to the current component's DOM tree and prevents unintended cross-component element targeting.

Yes, you need to manually register GSAP plugins like ScrollTrigger using gsap.registerPlugin before using them in your Vue or Svelte project to ensure the animation functionality is available and operates correctly.

The best way to clean up GSAP ScrollTrigger animations on unmount is to call the revert method on the gsap.context instance within Svelte's onDestroy hook, which removes all scoped animations and restores the DOM.