hyperframes/skills/gsap/references/frameworks.md

GSAP with Vue, Svelte, and Other Frameworks

For React, see react.md.

Principles (All Frameworks)

• Create tweens/ScrollTriggers after DOM is available (onMounted/onMount).
• Kill or revert in unmount cleanup.
• Scope selectors to component root via gsap.context(callback, scope).

Vue 3 (Composition API / script setup)

import { onMounted, onUnmounted, ref } from "vue";
import { gsap } from "gsap";

const container = ref(null);
let ctx;

onMounted(() => {
  ctx = gsap.context(() => {
    gsap.to(".box", { x: 100 });
    gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
  }, container.value);
});

onUnmounted(() => ctx?.revert());

Svelte

import { onMount } from "svelte";
import { gsap } from "gsap";

let container;
onMount(() => {
  const ctx = gsap.context(() => {
    gsap.to(".box", { x: 100 });
  }, container);
  return () => ctx.revert();
});

Use bind:this={container} for the root element ref.

ScrollTrigger Cleanup

ScrollTriggers inside gsap.context() are reverted by ctx.revert(). Call ScrollTrigger.refresh() after layout changes (nextTick in Vue, tick in Svelte).

Do Not

• Create tweens before the component is mounted.
• Use selector strings without a scope.
• Skip cleanup — always revert context on unmount.
• Register plugins inside re-rendering component bodies.