Scroll suave e animações no scroll sem destruir a performance

Elementos que surgem ao rolar, seções que se fixam enquanto o conteúdo muda, objetos 3D que reagem à posição da página. Bem feitas, essas experiências tornam um site memorável. Mal feitas, fazem a página engasgar e cansar.

O erro clássico

Ouvir o evento de scroll e alterar estilos a cada pixel, forçando o navegador a recalcular o layout dezenas de vezes por segundo.

O que funciona

1. 1.Anime `transform` e `opacity`, que não mexem no layout.
2. 2.Use observadores de interseção para disparar animações quando um elemento entra na tela, em vez de calcular a cada pixel.
3. 3.Valores ligados ao scroll com bibliotecas que agrupam atualizações por quadro.
4. 4.Scroll suave via JavaScript com moderação, preservando o comportamento nativo de teclado e de links internos.
5. 5.Pause o que está fora da tela, especialmente cenas 3D (3D na web com Three.js: quando vale a pena e como não pesar o site).

Seções fixas (sticky)

Ótimas para narrativas e trilhos horizontais, mas teste no celular: a barra de endereço que aparece e some muda a altura da tela.

Respeite quem não quer movimento

Com prefers-reduced-motion, as animações devem ser reduzidas ou desligadas (prefers-reduced-motion: animação com respeito a quem sente desconforto).

Não esconda conteúdo

Texto que só aparece depois de uma animação precisa estar no HTML desde o início — para robôs de busca e para quem rola rápido (SPA e SEO: por que o Google e as IAs não leem o seu site React).

A duração das transições segue a lógica de Micro-interações que convertem: como transições de 200ms a 300ms impactam a retenção do usuário.

Este site usa scroll animado e 3D com esses cuidados. Veja sites da We Codex ou fale com a gente.