GSAP com Vue, Svelte e Outros Frameworks

Compilado das habilidades oficiais do GSAP da GreenSock: https://github.com/greensock/gsap-skills

Quando Usar Esta Habilidade

Aplique ao escrever ou revisar código GSAP em Vue (ou Nuxt), Svelte (ou SvelteKit), ou outros frameworks de componentes que usam um ciclo de vida (mounted/unmounted). Para React especificamente, use gsap-react (hook useGSAP, gsap.context()).

Habilidades relacionadas: Para tweens e timelines use gsap-core e gsap-timeline; para animação baseada em scroll use gsap-scrolltrigger; para React use gsap-react.

Princípios (Todos os Frameworks)

• Crie tweens e ScrollTriggers após o DOM do componente estar disponível (ex: onMounted, onMount).
• Mate ou reverta na limpeza de unmount (ou equivalente) para que nada seja executado em nós desanexados e não haja vazamentos.
• Escopo de seletores para a raiz do componente para que .box e similares correspondam apenas a elementos dentro desse componente, não ao resto da página.

Vue 3 (Composition API)

Para um projeto Vite + Vue 3 executável demonstrando esses padrões, veja o exemplo upstream em https://github.com/greensock/gsap-skills/tree/aed9cfd3277740755f6bfc1155c7aa645403b760/examples/vue.

Use onMounted para executar o GSAP após o componente estar no DOM. Use onUnmounted para limpar.

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) — passe a ref do container (ex: container.value) como segundo argumento para que seletores como .item sejam escopados para essa raiz. Todas as animações e ScrollTriggers criados dentro do callback são rastreados e revertidos quando ctx.revert() é chamado.
• ✅ onUnmounted — sempre chame ctx.revert() para que tweens e ScrollTriggers sejam mortos e estilos inline revertidos.

Vue 3 (script setup)

Mesma ideia com <script setup> e 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

Para um projeto Nuxt 4 executável com registro de plugin, carregamento preguiçoso e padrões seguros para SSR, veja https://github.com/greensock/gsap-skills/tree/aed9cfd3277740755f6bfc1155c7aa645403b760/examples/nuxt.

Use um composable reutilizável para registrar Plugins GSAP e também para carregar preguiçosamente Plugins que não são extensivamente usados em sua aplicação:

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

// Para carregar dinamicamente todos os plugins GSAP
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"),

…