bjornmelin/gsap-frameworks

GSAP with Vue, Svelte, and Other Frameworks

When to Use This Skill

Apply when writing or reviewing GSAP code in Vue (or Nuxt), Svelte (or SvelteKit), or other component frameworks that use a lifecycle (mounted/unmounted). For React specifically, use gsap-react (useGSAP hook, gsap.context()).

Related skills: For tweens and timelines use gsap-core and gsap-timeline; for scroll-based animation use gsap-scrolltrigger; for React use gsap-react.

Principles (All Frameworks)

• Create tweens and ScrollTriggers after the component’s DOM is available (e.g. onMounted, onMount).
• Kill or revert them in the unmount (or equivalent) cleanup so nothing runs on detached nodes and there are no leaks.
• Scope selectors to the component root so .box and similar only match elements inside that component, not the rest of the page.

Vue 3 (Composition API)

See examples/vue/ for a runnable Vite + Vue 3 project demonstrating these patterns.

Use onMounted to run GSAP after the component is in the DOM. Use onUnmounted to clean up.

import { onMounted, onUnmounted, ref } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js

export default {
  setup() {
    const container = ref(null);
    let ctx;

    onMounted(() => {
      if (!container.value) return;
      ctx = gsap.context(() => {
        gsap.to(".box", { x: 100, duration: 0.6 });
        gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
      }, container.value);
    });

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

    return { container };
  },
};

• ✅ gsap.context(scope) — pass the container ref (e.g. container.value) as the second argument so selectors like .item are scoped to that root. All animations and ScrollTriggers created inside the callback are tracked and reverted when ctx.revert() is called.
• ✅ onUnmounted — always call ctx.revert() so tweens and ScrollTriggers are killed and inline styles reverted.

Vue 3 (script setup)

Same idea with <script setup> and refs:

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

const container = ref(null);
let ctx;

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

onUnmounted(() => {
  ctx?.revert();
});
</script>

<template>
  <div ref="container">
    <div class="box">Box</div>
    <div class="item">Item</div>
  </div>
</template>

Nuxt 4

See examples/nuxt/ for a runnable Nuxt 4 project with plugin registration, lazy loading, and SSR-safe patterns.

Use a reusable composable to register GSAP Plugins and also to lazy load Plugins that are not extensively used in your application:

// composables/useGSAP.ts
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// In order to dynamically load all the GSAP plugins
const pluginMap = {
  CustomEase: () => import("gsap/CustomEase"),
  Draggable: () => import("gsap/Draggable"),
  CSSRulePlugin: () => import("gsap/CSSRulePlugin"),
  EaselPlugin: () => import("gsap/EaselPlugin"),
  EasePack: () => import("gsap/EasePack"),
  Flip: () => import("gsap/Flip"),
  MotionPathPlugin: () => import("gsap/MotionPathPlugin"),
  Observer: () => import("gsap/Observer"),
  PixiPlugin: () => import("gsap/PixiPlugin"),
  ScrollToPlugin: () => import("gsap/ScrollToPlugin"),
  ScrollTrigger: () => import("gsap/ScrollTrigger"),
  TextPlugin: () => import("gsap/TextPlugin"),
  DrawSVGPlugin: () => import("gsap/DrawSVGPlugin"),
  Physics2DPlugin: () => import("gsap/Physics2DPlugin"),
  PhysicsPropsPlugin: () => import("gsap/PhysicsPropsPlugin"),
  ScrambleTextPlugin: () => import("gsap/ScrambleTextPlugin"),
  CustomBounce: () => import("gsap/CustomBounce"),
  CustomWiggle: () => import("gsap/CustomWiggle"),
  GSDevTools: () => import("gsap/GSDevTools"),
  InertiaPlugin: () => import("gsap/InertiaPlugin"),
  MorphSVGPlugin: () => import("gsap/MorphSVGPlugin"),
  MotionPathHelper: () => import("gsap/MotionPathHelper"),
  ScrollSmoother: () => import("gsap/ScrollSmoother"),
  SplitText: () => import("gsap/SplitText"),
} as const;

type PluginMap = typeof pluginMap;
type Plugins = keyof PluginMap;

// Resolves the module type for a given key, then picks the named export matching the key
// this allows to have the type definitions for autocomplete in your code editor
type PluginModule<K extends Plugins> = Awaited<ReturnType<PluginMap[K]>>;
type PluginExport<K extends Plugins> = PluginModule<K>[K & keyof PluginModule<K>];

export default function () {
  // Register all the GSAP Plugins you want at this point
  gsap.registerPlugin(ScrollTrigger);

  /*
    If you want to lazy load some of the plugins that are
    not widely used in your app (for example in just a couple
    of components or a single route), you can use this method
  */
  async function lazyLoadPlugin<K extends Plugins>(plugin: K): Promise<PluginExport<K>> {
    const loader = pluginMap[plugin];
    const m = await loader();
    const p = (m as any)[plugin];
    gsap.registerPlugin(p);
    return p;
  }

  return {
    gsap,
    ScrollTrigger,
    lazyLoadPlugin,
  };
}

Access in components via useGSAP():

const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP();

• ✅ useGSAP() provides typed access to the gsap instance and lazy load method.
• ✅ Lazy-load any plugin (SplitText, MorphSVG, etc.) that is not widely used in your app to reduce initial bundle size.
• ✅ Use gsap.context(scope) and onUnmounted → ctx.revert() in components, same as Vue 3.

Svelte

Use onMount to run GSAP after the DOM is ready. Use the returned cleanup function from onMount (or track the context and clean up in a reactive block / component destroy) to revert. Svelte 5 uses a different lifecycle; the same principle applies: create in “mounted” and revert in “destroyed.”

<script>
  import { onMount } from "svelte";
  import { gsap } from "gsap";
  import { ScrollTrigger } from "gsap/ScrollTrigger";

  let container;

  onMount(() => {
    if (!container) return;
    const ctx = gsap.context(() => {
      gsap.to(".box", { x: 100 });
      gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
    }, container);
    return () => ctx.revert();
  });
</script>

<div bind:this={container}>
  <div class="box">Box</div>
  <div class="item">Item</div>
</div>

• ✅ bind:this={container} — get a reference to the root element so you can pass it to gsap.context(scope).
• ✅ return () => ctx.revert() — Svelte’s onMount can return a cleanup function; call ctx.revert() there so cleanup runs when the component is destroyed.

Scoping Selectors

Do not use global selectors that can match elements outside the current component. Always pass the scope (container element or ref) as the second argument to gsap.context(callback, scope) so that any selector run inside the callback is limited to that subtree.

• ✅ gsap.context(() => { gsap.to(".box", ...) }, containerRef) — .box is only searched inside containerRef.
• ❌ Running gsap.to(".box", ...) without a context scope in a component can affect other instances or the rest of the page.

ScrollTrigger Cleanup

ScrollTrigger instances are created when you use the scrollTrigger config on a tween/timeline or ScrollTrigger.create(). They are included in gsap.context() and reverted when you call ctx.revert(). So:

• Create ScrollTriggers inside the same gsap.context() callback you use for tweens.
• Call ScrollTrigger.refresh() after layout changes (e.g. after data loads) that affect trigger positions; in Vue/Svelte that often means after the DOM updates (e.g. nextTick in Vue, tick in Svelte, or after async content load).

When to Create vs Kill

| Lifecycle | Action | | --------------------- | ----------------------------------------------------------------------------------------------------------------- | | Mounted | Create tweens and ScrollTriggers inside gsap.context(scope). | | Unmount / Destroy | Call ctx.revert() so all animations and ScrollTriggers in that context are killed and inline styles reverted. |

Do not create GSAP animations in the component’s setup or in a synchronous top-level script that runs before the root element exists. Wait for onMounted / onMount (or equivalent) so the container ref is in the DOM.

Do Not

• ❌ Create tweens or ScrollTriggers before the component is mounted (e.g. in setup without onMounted); the DOM nodes may not exist yet.
• ❌ Use selector strings without a scope (pass the container to gsap.context() as the second argument) so selectors don’t match elements outside the component.
• ❌ Skip cleanup; always call ctx.revert() in onUnmounted / onMount’s return so animations and ScrollTriggers are killed when the component is destroyed.
• ❌ Register plugins inside a component body that runs every render (it doesn't hurt anything, it's just wasteful); register once at app level.

Learn More

• gsap-react skill for React-specific patterns (useGSAP, contextSafe).

---

Codex Web Motion Overlay

The upstream GreenSock official skill content above is the primary GSAP guidance. This local overlay adds Codex-specific progressive-disclosure resources, static audit scripts, evals, and portable source metadata. Keep GSAP API behavior aligned with GreenSock's official skill and docs; use this overlay for validation, local boundaries, and report shape.

Local Boundaries

• Use gsap-react for React and Next.js React code.
• Use vanilla GSAP core when no framework lifecycle is involved.
• Keep this skill explicit-only for non-React frameworks.

Local Workflow

1. Identify framework lifecycle hooks and mount/unmount boundaries.
2. Scope selectors to the component root.
3. Register plugins once at module/app boundary.
4. Revert contexts, kill timelines, and clean listeners on unmount.

Local Gotchas

• Do not let selector text escape a component root.
• Hydration/client-only boundaries matter in SSR frameworks.
• Framework transitions may already own enter/exit timing; avoid duplicate animation owners.

<!-- skill-resources:start -->

Bundled Resources

• references/official-source.md - Official GreenSock framework skill source and license gate. Use this when verifying copied upstream framework guidance.
• references/framework-lifecycle.md - Vue, Svelte, Nuxt, and Astro lifecycle notes. Use this when deciding where GSAP setup and cleanup should live.
• references/component-scoping.md - Scoped selectors and cleanup contracts. Use this when selectors, refs, or framework component boundaries are involved.
• references/ssr-hydration-boundaries.md - SSR and hydration boundaries for framework GSAP. Read when Vue, Svelte, Astro, Nuxt, or islands code crosses server/client runtime boundaries.
• references/framework-composables-and-actions.md - Framework composables, actions, and directive wrappers. Read before wrapping GSAP in a Vue composable, Svelte action, Astro component script, or Nuxt plugin.
• references/index.md - Complete reference inventory and routing summary.
• references/source-ledger.md - Portable source list and copy policy.
• references/provenance.json - Machine-readable provenance and local-resource metadata.
• scripts/audit.mjs - Self-contained Codex audit CLI with domain-specific GSAP rules.
• assets/templates/gsap-frameworks-audit-report.md - GSAP audit response template.
• assets/templates/gsap-frameworks-review-checklist.md - GSAP manual review checklist.
• assets/examples/gsap-frameworks-starter.svelte - Minimal starter fixture/example.
• evals/trigger-queries.json - Trigger/near-miss eval set.
• evals/evals.json - Task-quality evals with assertions.

<!-- skill-resources:end -->

Audit CLI

node scripts/audit.mjs doctor --root . --format json
node scripts/audit.mjs scan --root . --format markdown
node scripts/audit.mjs scan --root . --format json --output gsap-frameworks-audit.json

Treat script findings as leads. Verify every finding against current code before changing behavior or reporting it as valid.