gsap-frameworks

Create GSAP animations inside onMounted using gsap.context(callback, container.value) so selectors are scoped to the component root. Store the context and call ctx.revert() in onUnmounted to kill tweens and ScrollTriggers when the component is destroyed.

Use bind:this to capture the container element, then create animations inside onMount wrapped in gsap.context scoped to that element. Return a cleanup function from onMount that calls ctx.revert() so everything is reverted when the component is destroyed.

Yes, register plugins once in a composable like useGSAP and only create animations in onMounted, which runs client-side after the DOM exists. The composable can also lazy-load plugins such as SplitText or MorphSVG to keep the initial bundle small.

Use the gsap-react skill for React, which covers the useGSAP hook and contextSafe patterns. This skill targets Vue, Nuxt, Svelte, and other lifecycle-based frameworks where you manage onMounted and unmount cleanup manually.

Selector strings like .box match globally when no scope is provided. Pass the container element as the second argument to gsap.context so all selectors inside the callback are limited to that component's subtree.

ScrollTriggers created without cleanup keep running on detached nodes after unmount. Create them inside gsap.context and call ctx.revert() on unmount, then call ScrollTrigger.refresh() after layout changes such as async data loading.