Desempenho máximo e animações atreladas à rolagem da página agora são possíveis usando apenas CSS. Descubra como a especificação Scroll-driven Animations torna bibliotecas JavaScript obsoletas para a maioria dos casos de uso visuais.
Se você já construiu uma página de destino moderna, provavelmente teve que lidar com animações ao rolar a tela (scroll reveals) ou efeitos de parallax. Historicamente, isso exigia bibliotecas pesadas de JavaScript ou o uso de Intersection Observers e event listeners no evento de scroll. O problema é que o JavaScript executa na thread principal e, frequentemente, resulta em jank (engasgos) durante a rolagem.
O fim do ScrollMagic e AOS
As bibliotecas clássicas monitoravam a posição do scroll para atualizar propriedades de estilo inline a cada milissegundo. Isso destruía a performance em dispositivos móveis menos potentes. Com a chegada da propriedade CSS animation-timeline, o paradigma muda: você define a animação em keyframes comuns e instrui o navegador a vincular o progresso dessa animação à posição da barra de rolagem (ou à visibilidade de um elemento) diretamente no motor de composição (compositor thread).
Isso traz duas vantagens esmagadoras. Primeiro, a performance é impecável, rodando a 60fps ou 120fps (dependendo da tela) independentemente da carga da thread principal. Segundo, o tamanho do arquivo do seu site despenca, melhorando drasticamente métricas vitais como LCP e INP.
"Substituir o ScrollReveal.js pelas Scroll-driven Animations CSS nativas reduziu o Total Blocking Time (TBT) de uma landing page nossa de 400ms para praticamente zero, elevando o PageSpeed de 78 para 99 no mobile."
Essa especificação se divide em dois conceitos chave: Scroll Progress Timelines (vinculadas ao contêiner de rolagem) e View Progress Timelines (vinculadas à visibilidade de um elemento específico dentro da área de rolagem).
Scroll Timelines vs View Timelines
Entender a diferença entre essas duas abordagens é essencial para dominar as animações de scroll no CSS.
- 01
Scroll Progress Timelines:
scroll()A animação progride de 0% a 100% conforme a barra de rolagem do elemento contêiner (ou da janela) vai do início ao fim. É perfeito para criar, por exemplo, uma barra indicadora de progresso de leitura no topo da página. Sintaxe básica:
animation-timeline: scroll(root block); - 02
View Progress Timelines:
view()O progresso da animação está vinculado ao quanto o próprio elemento animado (ou um elemento sujeito) está visível dentro da área de rolagem. A animação começa em 0% quando o elemento entra na tela e termina em 100% quando sai. Ideal para efeitos de "fade in" e reveals. Sintaxe:
animation-timeline: view(); - 03
Ajustes com
animation-rangeO
animation-rangepermite dizer ao navegador em que ponto exato da intersecção a animação deve acontecer. Por exemplo,animation-range: entry 20% cover 50%;faz a animação ocorrer apenas durante a entrada do elemento na viewport.
Exemplos práticos e métricas
Vamos olhar para os ganhos práticos ao migrar para CSS nativo. Parallax de fundo, que sempre foi um pesadelo de performance, agora é resolvido com poucas linhas.
Um simples width: 100%; scale: 0 1; transform-origin: left; animation: grow auto linear; animation-timeline: scroll(); cria a barra sem uma gota de JS.
Aplicando animation-timeline: view(); animation-range: entry; e uma animação de opacidade e translateY, as seções surgem suavemente ao subir a tela.
Em imagens de fundo, atrelar a posição Y (background-position ou transform translateY) a um view timeline cria a diferença de velocidade em relação à rolagem.
O suporte já é generalizado no Chrome, Edge e Opera, e em fase de testes e desenvolvimento rápido em Safari e Firefox. Fallbacks via media queries (@supports (animation-timeline: scroll())) são altamente recomendados.
O que evitar
- Animar propriedades pesadas. Mantenha as animações restritas a
transformeopacity. Animarheight,widthoumarginvia scroll vai causar engasgos mesmo no CSS. - Usar Scroll Timelines em elementos que nunca sairão da viewport no mobile, causando animações quebradas ou invisíveis.
- Esquecer de fornecer polyfills ou um estado fallback decente para browsers que ainda não suportam a feature (como versões mais antigas do Safari).
FAQ: Perguntas antes de começar
Isso substitui o GSAP ScrollTrigger completamente?
Para revelações simples, fade-ins e parallax básico, sim, com vantagens de performance. Mas o GSAP ainda é necessário para sequências coreografadas muito complexas, cálculos baseados em caminhos SVG intricados ou lógicas temporais complexas.
Como garanto a acessibilidade (a11y)?
Respeite sempre as preferências do usuário. Envolva suas declarações de animação em uma media query @media (prefers-reduced-motion: no-preference) para desativá-las caso o usuário seja sensível a movimento.
Posso atrelar a animação ao scroll horizontal?
Sim! Usando scroll(inline) ou especificando o eixo no View Timeline, você pode atrelar animações a galerias carrossel de rolagem horizontal nativa.
Pesquisa que sustenta este guia
Conteúdo original da AL Marketing Digital, elaborado a partir de experiência prática de campo e síntese das fontes primárias abaixo.
Quer presença digital que realmente converte?
A AL integra estratégia de busca, produção visual e desenvolvimento web ultrarrápido para negócios que querem resultado concreto.