GSAP

Por que usar GSAP?

O CSS lida bem com transições simples e keyframes e, para um efeito de hover ou um fade-in, ele é a ferramenta certa. No momento em que você precisa coordenar vários elementos, vincular animações ao scroll ou controlar a reprodução dinamicamente, o CSS torna-se limitado. É aí que o GSAP (GreenSock Animation Platform) se destaca.

O GSAP oferece uma API concisa e expressiva para animar valores ao longo do tempo, além de um modelo de timeline para sequenciá-los. Ele roda em requestAnimationFrame, anima de forma eficiente e seu ecossistema de plugins cobre scrolling, dragging, morphing e muito mais. Para sites de marketing polidos, tours de produto e storytelling de dados, ele é o padrão da indústria.

Tweens

Um tween altera uma ou mais propriedades ao longo de uma duração.

// tweens.js
import gsap from "gsap";

gsap.to(".box", { x: 200, duration: 1, ease: "power2.out" });
gsap.from(".title", { y: 40, opacity: 0, duration: 0.8 });
gsap.fromTo(".card", { scale: 0.8 }, { scale: 1, duration: 0.4 });

to anima para um valor, from anima de um valor para o estado atual, e fromTo especifica ambos. O GSAP lida com transforms (x, y, scale, rotation) nativamente, que são as propriedades que permanecem no compositor e mantêm a animação fluida.

Timelines

Uma timeline sequencia tweens em um relógio compartilhado, com parâmetros de posição que tornam o timing preciso.

// timeline.js
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

tl.from(".nav", { y: -20, opacity: 0 })
  .from(".hero h1", { y: 40, opacity: 0 }, "-=0.3")
  .from(".hero p", { y: 20, opacity: 0 }, "-=0.2")
  .from(".hero button", { scale: 0.9, opacity: 0 }, "-=0.2");

O "-=0.3" significa “comece 0,3 segundos antes do tween anterior terminar”, o que sobrepõe as etapas para um fluxo natural. Timelines podem ser pausadas, revertidas, aceleradas, seeked e rotuladas, o que as torna muito mais controláveis do que uma cadeia de chamadas setTimeout. Elas também tornam a limpeza trivial: encerre a timeline e todos os tweens param.

Stagger e easing

O Stagger cria um deslocamento na mesma animação entre vários alvos, o que é a chave para aqueles efeitos polidos de listas e grids que você vê em sites modernos.

// stagger.js
gsap.from(".card", {
  y: 30,
  opacity: 0,
  duration: 0.5,
  stagger: 0.08,
});

O Easing controla a sensação do movimento. power2.out começa rápido e estabiliza, back.out ultrapassa levemente o destino e elastic quica. O easing do GSAP é um de seus pontos fortes e é difícil de replicar apenas com CSS.

ScrollTrigger

O ScrollTrigger vincula animações à posição do scroll, permitindo a narrativa guiada por rolagem que define muitos sites premiados.

// scroll.js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to(".panel", {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".panels",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
  },
});

O scrub: true vincula o progresso da animação à barra de rolagem, e o pin: true mantém a seção fixa enquanto você rola a página. O ScrollTrigger também oferece suporte a snap, toggles e callbacks, além de gerenciar o redimensionamento e a atualização (refresh) automaticamente para você.

Performance

O movimento deve parecer fluido, e isso significa animar as propriedades corretas.

• Anime transform e opacity, que o compositor consegue processar sem disparar o layout.
• Evite animar width, height, top, left ou margin, pois eles forçam o layout a cada frame.
• Anime menos elementos simultaneamente e pause animações que estejam fora da tela.
• Use will-change com moderação em elementos que estão prestes a ser animados.
• Encerre as timelines quando um componente for desmontado para evitar leaks e processamento desnecessário.

Consulte o guia de Web Performance para entender como a animação interage com métricas como INP.

React e cleanup

O hook oficial useGSAP do @gsap/react limita os seletores a um container e realiza a limpeza (cleanup) automaticamente, o que evita as armadilhas comuns ao animar o DOM gerenciado pelo React.

// Hero.jsx
import { useRef } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

export function Hero() {
  const ref = useRef(null);

  useGSAP(() => {
    gsap.from(".title", { y: 40, opacity: 0 });
  }, { scope: ref });

  return <section ref={ref}><h1 className="title">Hello</h1></section>;
}

O hook lida com a dupla invocação do StrictMode e reverte as animações no unmount, garantindo que você não cause vazamentos de tweens nem deixe elementos em um estado semi-animado.

Acessibilidade

Sempre respeite prefers-reduced-motion. Para usuários com sensibilidade a movimento, substitua a animação por um fade simples ou remova-a completamente.

// reduced.js
const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".card", { y: 30, opacity: 0, stagger: 0.08 });
});

mm.add("(prefers-reduced-motion: reduce)", () => {
  gsap.from(".card", { opacity: 0 });
});

Esta é uma pequena quantidade de código que faz uma diferença real para um grupo significativo de usuários.

Melhores práticas

• Use timelines em vez de timeouts encadeados para qualquer sequência.
• Anime transform e opacity, não propriedades de layout.
• Use stagger em listas para um visual mais polido e natural.
• Registre plugins apenas uma vez e reutilize-os.
• Limpe as timelines ao desmontar o componente, especialmente em React.
• Respeite a preferência prefers-reduced-motion.
• Pause ou encerre animações que estejam fora da tela (offscreen).

Erros comuns

• Animar propriedades de layout, causando jank.
• Encadear chamadas de setTimeout que perdem a sincronia e são difíceis de cancelar.
• Deixar timelines rodando após o componente ser desmontado.
• Usar motion em excesso até que a página pareça poluída.
• Ignorar preferências de reduced-motion.
• Executar animações de scroll pesadas em dispositivos de baixo desempenho sem realizar testes.

Próximos passos

O GSAP transforma a animação de uma tarefa tediosa em uma ferramenta de design. Comece com a base de animações CSS para saber quando você precisará de mais recursos e, então, adicione o GSAP para sequenciamento e scroll. Combine-o com Three.js para cenas 3D e fique de olho nas métricas no guia de Web Performance. Depois, anime uma seção hero e sinta a diferença que uma sequência bem cronometrada faz.