Desempenho do GSAP

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

Quando Usar Esta Habilidade

Aplique ao otimizar animações GSAP para 60fps fluidos, reduzir o custo de layout/pintura, ou quando o usuário perguntar sobre desempenho, travamentos (jank) ou melhores práticas para animações rápidas.

Habilidades relacionadas: Crie animações com gsap-core (transforms, autoAlpha) e gsap-timeline; para desempenho do ScrollTrigger veja gsap-scrolltrigger.

Prefira Transform e Opacidade

Animar transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) e opacity mantém o trabalho no compositor e evita layout e a maior parte da pintura. Evite animar propriedades pesadas de layout quando um transform pode alcançar o mesmo efeito.

• ✅ Prefira: x, y, scale, rotation, opacity.
• ❌ Evite quando possível: width, height, top, left, margin, padding (eles disparam layout e podem causar travamentos).

Os x e y do GSAP usam transforms (translate) por padrão; use-os em vez de left/top para movimento.

will-change

Use will-change em CSS em elementos que serão animados. Isso sugere ao navegador para promover a camada.

will-change: transform;

Agrupe Leituras e Escritas

O GSAP agrupa atualizações internamente. Ao misturar GSAP com leituras/escritas diretas no DOM ou código dependente de layout, evite intercalar leituras e escritas de forma que cause repetição de "layout thrashing". Prefira fazer todas as leituras primeiro, depois todas as escritas (ou deixe o GSAP lidar com as escritas de uma vez).

Muitos Elementos (Stagger, Listas)

• Use stagger em vez de muitos tweens separados com atrasos manuais quando a animação for a mesma; é mais eficiente.
• Para listas longas, considere virtualização ou animar apenas os itens visíveis; evite criar centenas de tweens simultâneos se isso causar travamentos.
• Reutilize timelines sempre que possível; evite criar novas timelines a cada frame.

Propriedades Atualizadas Frequentemente (ex: seguidores de mouse)

Prefira gsap.quickTo() para propriedades que são atualizadas com frequência (ex: x/y de seguidores de mouse). Ele reutiliza um único tween em vez de criar novos tweens a cada atualização.

let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
    yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });

document.querySelector("#container").addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});

ScrollTrigger e Desempenho

• pin: true promove o elemento fixado; fixe apenas o que for necessário.
• scrub com um valor pequeno (ex: scrub: 1) pode reduzir o trabalho durante a rolagem; teste em dispositivos de baixo desempenho.
• Chame ScrollTrigger.refresh() apenas quando o layout realmente mudar (ex: após o carregamento do conteúdo), não a cada redimensionamento; use debounce quando possível.

Reduza o Trabalho Simultâneo

• Pause ou mate animações fora da tela ou inativas quando elas não estiverem visíveis (ex: quando o usuário se afasta).
• Evite animar um grande número de propriedades em muitos elementos ao mesmo tempo; simplifique ou sequencie se necessário.

Melhores Práticas

• ✅ Anime transform e opacity; use will-change em CSS apenas em elementos que animam.
• ✅ Use stagger em vez de muitos tweens separados com atrasos manuais quando a animação for a mesma.
• ✅ Use gsap.quickTo() para propriedades atualizadas frequentemente (ex: seguidores de mouse).
• ✅ Limpe ou mate animações fora da tela; chame ScrollTrigger.refresh() quando o layout mudar, com debounce quando possível.

Não Faça

• ❌ Anime width/ height/ top/ left para movimento quando x/ y/ scale podem alcançar o mesmo visual.
• ❌ Defina will-change ou force3D em todos os elementos "por via das dúvidas"; use para elementos que estão realmente animando.
• ❌ Crie centenas de tweens ou ScrollTriggers sobrepostos sem testar em dispositivos de baixo desempenho.
• ❌ Ignore a limpeza; tweens e ScrollTriggers perdidos continuam rodando e podem prejudicar o desempenho e a correção.