Scrollytelling: a rolagem vira a linha do tempo

Camadas separadas + progresso da rolagem

Cada ingrediente é um elemento independente (aqui, um SVG). O JavaScript lê o quanto você já rolou dentro da seção presa e transforma isso num número de 0 a 1. Esse número vira a altura de cada camada, o giro e o quanto elas se afastam do centro.

// 1. progresso de 0 a 1 dentro do trilho da cena
const r = trilho.getBoundingClientRect();
const p = Math.min(1, Math.max(0, -r.top / (r.height - innerHeight)));

// 2. o progresso vira posição de cada camada
camadas.forEach((el, i) => {
  const centro = (i - (n - 1) / 2);        // -2.5, -1.5, ... 2.5
  const abre   = Math.sin(p * Math.PI);    // abre no meio e fecha no fim
  el.style.transform = `translate(-50%,-50%)
      translateY(${centro * (28 + abre * 150)}px)
      rotate(${abre * centro * 6}deg)`;
});

O Math.sin(p * Math.PI) é o truque que faz a peça abrir e fechar num movimento só: ele vale 0 no início, 1 no meio e 0 de novo no fim.

Sequência de imagens (o método da Apple)

Aqui não existem elementos se movendo: existe um <canvas> e, a cada rolagem, você desenha o quadro correspondente. Nos sites de produto famosos, esses quadros são imagens renderizadas em 3D (Blender, Cinema 4D) e exportadas como uma sequência de 120 a 240 arquivos.

// pré-carrega a sequência
const quadros = [];
for (let i = 0; i < TOTAL; i++) {
  const img = new Image();
  img.src = `frames/${String(i).padStart(4,'0')}.webp`;
  quadros.push(img);
}
// desenha o quadro correspondente ao progresso
const i = Math.round(p * (TOTAL - 1));
ctx.drawImage(quadros[i], 0, 0, canvas.width, canvas.height);

O ponto de atenção é o peso. 200 quadros em WebP a 1600px dão facilmente 15 MB. Numa página de venda isso destrói a nota de performance. Na prática se usa 60 a 120 quadros, largura menor no celular e carregamento sob demanda.

Animação nativa amarrada à rolagem

Para efeitos mais simples (entrada, parallax, barra de progresso) já existe CSS nativo: animation-timeline: view(). Não precisa de biblioteca nem de JavaScript, e o navegador roda fora da thread principal, então não trava.

Seu navegador ainda não suporta animation-timeline: os cartões abaixo aparecem sem animação (é o fallback correto).

.card{
  animation: entra linear both;
  animation-timeline: view();          /* a linha do tempo é a rolagem */
  animation-range: entry 12% cover 42%;
}
@keyframes entra{ to{ opacity:1; transform:none } }

Qual técnica usar em cada caso

• GSAP + ScrollTrigger: virou gratuito por completo em 2024 (a Webflow comprou e liberou todos os plugins). É o padrão do mercado para sequências encadeadas. Vale quando a cena tem várias etapas dependentes.
• Lenis: aquela sensação de rolagem "macia" desses sites quase sempre é essa biblioteca. É pequena e resolve sozinha metade da impressão de caro.
• Three.js: só quando o 3D precisa ser interativo de verdade.
• Blender: gratuito, é onde se renderiza a sequência de imagens.
• Para o que está nesta página, nada disso foi necessário: é JavaScript comum com requestAnimationFrame.