gsap-frameworks

To clean up GSAP animations on component unmount in Vue, initialize them inside onMounted and call their revert method within onUnmounted. This lifecycle integration automatically destroys animations and prevents memory leaks when the component is destroyed.

GSAP context scoping restricts selector queries and animations to a specific component instance, preventing global leaks. You need it in Svelte when multiple components use GSAP simultaneously, ensuring animations only target local elements within their own component boundaries.

Yes, ScrollTrigger integrates with Nuxt and Vue lifecycle hooks. You register the ScrollTrigger plugin and initialize it inside onMounted, then ensure proper cleanup by reverting the GSAP context during onUnmounted to safely remove scroll-driven animations.

Your GSAP animation targets external elements because it lacks scoped context. Using gsap.context scopes selector queries to a specific component reference, preventing animations from accidentally querying and affecting elements outside the intended Vue or Svelte component.

The best way to structure GSAP animations in Svelte is to initialize them within the onMount lifecycle hook and use gsap.context for selector scoping. Return a cleanup function from onMount or use onDestroy to revert the context and prevent animation leaks.