GSAP with Vue, Svelte, and Other Frameworks

GSAP with Vue, Svelte, and Other Frameworks

Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills

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)

For a runnable Vite + Vue 3 project demonstrating these patterns, see the upstream example at https://github.com/greensock/gsap-skills/tree/aed9cfd3277740755f6bfc1155c7aa645403b760/examples/vue.

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);
    });