Performance GSAP
Quando Usar Este Skill
Aplique ao otimizar animações GSAP para 60fps suaves, reduzindo custos de layout/pintura, ou quando o usuário perguntar sobre performance, jank ou melhores práticas para animações rápidas.
Skills relacionados: Construa animações com gsap-core (transforms, autoAlpha) e gsap-timeline; para performance com ScrollTrigger veja gsap-scrolltrigger.
Prefira Transform e Opacity
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 jank).
O x e y do GSAP usam transform (translate) por padrão; utilize-os em vez de left/top para movimento.
will-change
Use will-change no CSS em elementos que serão animados. Ele avisa o navegador para promover a camada.
will-change: transform;
Leitura e Escrita em Lote
O GSAP faz batching de 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 layout thrashing repetido. Prefira fazer todas as leituras primeiro, depois todas as escritas (ou deixe o GSAP lidar com as escritas de uma só vez).
Muitos Elementos (Stagger, Listas)
- Use stagger em vez de várias tweens separadas com atrasos manuais quando a animação for a mesma; é mais eficiente.
- Para listas longas, considere virtualização ou animar apenas itens visíveis; evite criar centenas de tweens simultâneas se isso causar jank.
- Reutilize timelines quando 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 seguidor de mouse). Ele reutiliza uma única tween em vez de criar novas 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 Performance
- pin: true promove o elemento fixado; fixe apenas o necessário.
- scrub com um valor pequeno (ex:
scrub: 1) pode reduzir trabalho durante o scroll; teste em dispositivos de baixo desempenho. - Chame ScrollTrigger.refresh() apenas quando o layout realmente mudar (ex: após carregamento de conteúdo), não em todo resize; use debounce quando possível.
Reduza Trabalho Simultâneo
- Pause ou mate animações fora da tela ou inativas quando não estiverem visíveis (ex: quando o usuário navegar para outra página).
- 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 no CSS apenas em elementos que realmente animam.
- ✅ Use stagger em vez de várias tweens separadas 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 a mesma aparência.
- ❌ Defina will-change ou force3D em todo elemento "por precaução"; use apenas em elementos que realmente estão sendo animados.
- ❌ Crie centenas de tweens ou ScrollTriggers sobrepostos sem testar em dispositivos de baixo desempenho.
- ❌ Ignore a limpeza; tweens e ScrollTriggers soltos continuam executando e podem prejudicar a performance e a correção.