Scrollytelling é contar uma história em que a rolagem conduz o ritmo: cada movimento do dedo revela a próxima cena, número ou imagem. Funciona porque transforma o gesto mais comum da web em roteiro, e o visitante avança na mensagem sem precisar clicar em nada.
O que é scrollytelling, afinal?
A palavra junta scroll (rolagem) e storytelling (contar histórias). Em vez de uma página que só desce, o site reage à posição da rolagem: um gráfico se monta, uma foto fica presa enquanto o texto passa, um objeto 3D gira até mostrar o detalhe que o parágrafo descreve.
O ponto não é a animação. É a ordem. Quem projeta um scrollytelling decide o que a pessoa vê primeiro, o que ela entende depois e onde ela chega no final, como num filme em que o espectador controla a velocidade.
De onde veio a narrativa por scroll?
O marco mais citado é "Snow Fall: The Avalanche at Tunnel Creek", de John Branch, publicado pelo New York Times em 20 de dezembro de 2012. A reportagem em seis partes misturava texto com gráficos interativos, simulações animadas e vídeo aéreo, e venceu o Pulitzer de Feature Writing de 2013. Segundo o verbete sobre Snow Fall, uma equipe de onze pessoas trabalhou por mais de seis meses no projeto.
O varejo levou a ideia para a venda. A página do AirPods Pro na Apple, consultada em outubro de 2026, é uma página longa e em sequência: herói com a promessa, destaques, vista de perto do produto, cancelamento de ruído, áudio, personalização. Cada seção responde à pergunta que a anterior deixou no ar.
Em 2026, o formato segue no topo da premiação. Dois exemplos da lista de Sites of the Day da Awwwards:
- Colonia Zacamil, Site of the Day em 1º de outubro de 2026, do Adoratorio Studio com o 60fps, feito com three.js e Vue.js. A Awwwards deu nota 8,80 em animações e 6,40 em acessibilidade: a narrativa encanta, mas o cuidado com quem não pode ver movimento ficou para trás.
- Tengile MalaMala Collection, Site of the Day em 3 de outubro de 2026, da DashDigital, marcado com a tag Storytelling e feito em React com Sanity. Aqui a história é contada com foto, vídeo e linha do tempo, sem depender de 3D.
Outros exemplos com o que cada um ensina estão em 15 sites 3D para se inspirar.
Quais são os tipos de scrollytelling e quando usar cada um?
Nem todo scrollytelling precisa de 3D. O tipo certo depende do que a mensagem pede e do orçamento.
| Tipo | Como funciona | Quando usar | Custo de produção |
|---|---|---|---|
| Revelação simples | Blocos de texto e imagem entram ao rolar | Site institucional, landing page | Baixo |
| Seção fixa (pin) | Uma imagem fica presa enquanto o texto passa ao lado | Explicar um processo em etapas | Médio |
| Sequência de quadros | Vídeo ou série de imagens avança com a rolagem | Mostrar produto girando ou se montando | Médio a alto |
| Gráfico que se monta | Dados se desenham conforme o leitor avança | Relatório, reportagem, prova com números | Médio |
| Cena 3D em tempo real | Câmera e objetos WebGL reagem ao scroll | Marca premium, produto de alto valor, lançamento | Alto |
Classificação e faixas de custo relativas da Brave Cross, outubro de 2026, a partir dos exemplos citados acima. Custo em real de cada formato depende do escopo; veja quanto custa um site 3D.
A escolha da tecnologia para o último tipo, entre three.js, Spline e React Three Fiber, está em qual tecnologia para o seu site 3D. O panorama do 3D na web está no guia completo de site 3D.
Por que scrollytelling funciona tão bem na primeira dobra?
Porque o primeiro julgamento sobre uma marca acontece antes de qualquer leitura. Uma primeira tela que responde ao gesto avisa, sem palavra, que alguém pensou naquilo. Escrevemos sobre essa tese em A primeira dobra é o julgamento.
Na home da Brave Cross, a narrativa por scroll é feita com GSAP e Lenis. Uma cortina de abertura de cerca de 1,2 s roda no compositor do navegador (WAAPI), sem shader síncrono, embora adie de propósito o LCP. No celular, o 3D do monólito só carrega depois do primeiro quadro, e as animações infinitas usam apenas transform e opacity, que não forçam repintura.
Como planejar um scrollytelling sem pesar nem enjoar?
Escreva o roteiro primeiro
liste em frases o que a pessoa precisa entender, na ordem, antes de desenhar
Uma ideia por tela
cada parada da rolagem carrega uma mensagem, não três
Escolha o tipo mais simples
use 3D só quando ele explica algo que foto e vídeo não explicam
Proteja a performance
carregue o pesado depois do primeiro quadro e anime só transform e opacity
Respeite reduzir movimento
com a preferência ligada, troque deslocamento por dissolução
Teste no celular real
role rápido, role devagar, volte, e veja se a história ainda faz sentido
O passo de acessibilidade não é detalhe. Animação ligada ao scroll pode causar enjoo em quem tem sensibilidade vestibular, e o sistema operacional permite pedir menos movimento. Na Brave Cross, com "reduzir movimento" ligado, o site dissolve em vez de congelar. O que fazer em cada caso está em Animação sem enjoar.
Para aprender com os melhores, vale abrir um site premiado e ver como a rolagem foi montada. O roteiro está em como estudar um site do Awwwards por dentro.
Perguntas frequentes
O que significa scrollytelling?
Scrollytelling é a junção de scroll (rolagem) com storytelling (contar histórias). Descreve páginas em que texto, imagem, vídeo ou 3D mudam conforme a pessoa rola, de modo que a rolagem vira o ritmo da narrativa. O exemplo clássico é "Snow Fall", do New York Times, de dezembro de 2012, vencedor do Pulitzer de 2013.
Scrollytelling atrapalha o SEO?
Não, quando o texto está no HTML e não preso dentro de imagem, vídeo ou canvas. O buscador lê o conteúdo; a animação é camada visual. O risco real é de performance: cenas pesadas carregadas cedo pioram a velocidade percebida. Carregar o 3D depois do primeiro quadro e animar só transform e opacity resolve a maior parte do problema.
Qual ferramenta usar para fazer um site com animação ao rolar?
Para sites sob medida, a combinação mais comum é GSAP (com o plugin ScrollTrigger) para ligar animações à rolagem e Lenis para suavizar o scroll. É a que a Brave Cross usa. Para cenas 3D, entra three.js ou React Three Fiber.
Todo site precisa de scrollytelling?
Não. Funciona quando a mensagem tem sequência: lançamento, produto de alto valor, marca que precisa ser percebida antes de ser lida. Atrapalha quando a pessoa quer um dado rápido, como horário, preço ou endereço. Nesses casos, uma revelação simples ou nenhuma animação entrega mais.
Scrollytelling funciona no celular?
Funciona, desde que seja projetado para ele. Telas fixas (pins) precisam medir a altura real do palco, porque a barra do navegador muda de tamanho ao rolar, e cenas 3D devem carregar depois do primeiro quadro. Testar em aparelho real, com "reduzir movimento" ligado e desligado, é obrigatório.
Conte a sua história na ordem certa
Scrollytelling não é efeito. É roteiro com ritmo controlado pelo visitante, do "Snow Fall" de 2012 aos Sites of the Day de outubro de 2026. O formato certo é o mais simples que ainda explica a mensagem, rodando leve no celular e respeitando quem pede menos movimento.
Se a sua marca tem uma história que merece ser rolada, a Brave Cross projeta a narrativa, o 3D e a performance junto com você; e se você quer aprender a construir, a escola da Brave Cross ensina a base de Front-End. Para começar o seu projeto, fale com a Brave Cross.