Desempenho do GSAP
Quando Usar Esta Skill
Aplique ao otimizar animações GSAP para 60fps suaves, reduzindo custo de layout/pintura, ou quando o usuário perguntar sobre desempenho, travamentos ou melhores práticas para animações rápidas.
Skills relacionadas: Construa animações com gsap-core (transformações, autoAlpha) e gsap-timeline; para desempenho com ScrollTrigger veja gsap-scrolltrigger.
Prefira Transformação 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 uma transformação 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).
O x e y do GSAP usam transformações (translate) por padrão; use-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;
Agrupar Leituras e Escritas
O GSAP agrupa atualizações internamente. Ao misturar GSAP com leituras/escritas diretas do DOM ou código dependente de layout, evite intercalar leituras e escritas de forma que cause thrashing de layout 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 é 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 travamentos.
- Reutilize timelines quando possível; evite criar novas timelines a cada quadro.
Propriedades Atualizadas com Frequência (ex. seguidores de mouse)
Prefira gsap.quickTo() para propriedades que são atualizadas com frequência (ex. x/y de seguidor de mouse). Ela 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 Desempenho
- pin: true promove o elemento fixado; fixe apenas o 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 carregamento de conteúdo), não a cada redimensionamento; debounce quando possível.
Reduzir Trabalho Simultâneo
- Pause ou elimine animações fora da tela ou inativas quando não estiverem visíveis (ex. quando o usuário navega para outra aba).
- 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 animam.
- ✅ Use stagger em vez de várias tweens separadas com atrasos manuais quando a animação é a mesma.
- ✅ Use gsap.quickTo() para propriedades atualizadas com frequência (ex. seguidores de mouse).
- ✅ Limpe ou elimine 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 "só por precaução"; use em 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 soltos continuam rodando e podem prejudicar desempenho e correção.