gsap-frameworks

GSAP animations break after route changes because tweens and ScrollTriggers are not properly cleaned up on component unmount. Reverting GSAP contexts and killing active animations when components are destroyed prevents detached DOM nodes from continuing to run.

To set up GSAP ScrollTrigger safely in Svelte, initialize tweens and ScrollTriggers only after the DOM is mounted. Use lifecycle-safe initialization to ensure elements exist before creating animations, and scope selectors to the component root to avoid targeting wrong elements.

The best way to prevent GSAP selector leaks in Nuxt is to use context-based scoping that limits selectors to a specific component root. This ensures animations only affect elements within the intended component boundary rather than matching similar elements across the entire page.

GSAP works with Nuxt SSR when you use lazy loading for less common plugins and defer animation initialization to mounting time. Registering plugins once and avoiding DOM access during server-side rendering prevents hydration mismatches and keeps animations SSR-safe.

Clean up GSAP timelines when a Vue component is destroyed by reverting GSAP contexts and killing animations during the unmount lifecycle. This ensures tweens, timelines, and ScrollTriggers associated with detached nodes stop running and free up resources.

GSAP context scoping limits animations to a specific component by restricting selector queries to the component root element. This approach prevents selectors from accidentally matching elements outside the component, ensuring tweens and timelines only animate intended nodes.