gsap-frameworks

GSAP animations break in Vue and Svelte when selectors leak outside the component subtree or tweens initialize before the DOM mounts. Scoping selectors with gsap.context and creating tweens only after mount prevents these lifecycle bugs and detached-node updates.

To set up GSAP ScrollTrigger safely in SvelteKit or Nuxt, initialize triggers only after the component is mounted so target elements exist, scope selectors to the component root using gsap.context, and revert the context during unmount to clean up triggers and prevent leaks.

GSAP works with Vue 3 lifecolds without memory leaks by creating tweens and ScrollTriggers inside gsap.context after the mounted hook, then calling context.revert() during the unmounted hook to clear inline styles, triggers, and detached node references.

The best way to clean up GSAP animations on Svelte component unmount is wrapping tweens in a gsap.context and calling its revert method during the destroy lifecycle phase, removing triggers and preventing style leakage to other UI instances.

You can use gsap.context to scope GSAP animations to a specific Vue ref by passing the component root or ref element as the context scope parameter, ensuring selectors only match nodes within that subtree and ignore the rest of the page.