Um ecrã em branco é a primeira coisa que um visitante vê enquanto o site carrega. Mas poderia estar a ver blocos de conteúdo a aparecerem suavemente.

A animação acionada pelo scroll já não é decorativa. Dirige a atenção, define o ritmo da navegação e dá vida às landing pages. Mas escolher uma ferramenta ao acaso significa arriscar o desempenho e quebrar layouts em dispositivos móveis.

Abaixo estão três abordagens funcionais para animação por scroll em 2026, desde JavaScript nativo sem uma única dependência até bibliotecas prontas a usar com dezenas de efeitos. Como bónus, analisamos a falha fatal do Revealator, um plugin que já foi popular mas ficou preso em 2020.

💡 Visão geral rápida:

• Vai perceber como a Intersection Observer API permite animações de revelação sem jQuery ou bibliotecas de terceiros
• Vai explorar o AOS, a biblioteca mais popular (28 000 estrelas no GitHub), as suas classes, atributos e configuração em 5 minutos
• Vai comparar o ScrollReveal e o AOS por curva de aprendizagem, tamanho do bundle e flexibilidade
• Vai aprender porque é que o Revealator já não pode ser usado em novos projetos
• Vai obter uma tabela comparativa e uma escolha pronta para a sua tarefa

Intersection Observer API, uma abordagem nativa sem dependências

Uma API do browser que monitoriza quando um elemento intersecta a viewport. Sem jQuery, sem polyfills para browsers modernos. O suporte atinge mais de 97% da audiência global, de acordo com o Can I Use.

O princípio é simples: cria um observer, anexa-o aos elementos alvo e recebe um callback quando um elemento entra na área visível. Nesse momento, adiciona uma classe CSS com animação.

1
const observer = new IntersectionObserver((entries) => {
2
  entries.forEach(entry => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add('visible');
5
    }
6
  });
7
}, { threshold: 0.1 });
8
 
9
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

O código acima monitoriza todos os elementos com a classe .reveal. Quando um elemento entra na viewport (o valor de threshold é definido no código), a animação é acionada. Define o CSS para ela, qualquer @keyframes que desejar.

1
.reveal {
2
  opacity: 0;
3
  transform: translateY(30px);
4
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
5
}
6
 
7
.reveal.visible {
8
  opacity: 1;
9
  transform: translateY(0);
10
}

Vantagens da abordagem: zero dependências, sem aumento do bundle, controlo total sobre os triggers e a animação CSS. Adequado para projetos onde cada kilobyte importa e o desempenho em dispositivos fracos é crítico.

Desvantagens: precisa de escrever o seu próprio wrapper para reativação, atrasos e animações em cascata. As bibliotecas fazem isto de raiz.

Para um projeto em JS puro com requisitos de alta velocidade, opte pelo Intersection Observer. Se não quiser escrever o wrapper manualmente, veja o AOS.

AOS (Animate on Scroll), uma biblioteca com 28 000 estrelas

O AOS é o padrão de facto para animações por scroll em desenvolvimento web. O repositório no GitHub tem mais de 28 000 estrelas e 2 600 forks. A biblioteca é tão simples que a configuração demora exatamente dois minutos.

Ligue o CSS e o JS, via CDN ou npm:

1
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
2
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
3
<script>AOS.init();</script>

Depois disso, qualquer elemento com um atributo data-aos ganha vida ao fazer scroll:

1
<div data-aos="fade-up">Этот блок выплывет снизу</div>
2
<div data-aos="zoom-in" data-aos-delay="300">Этот — с задержкой 300 мс</div>

Existem mais de 30 efeitos integrados: fade, flip, zoom, slide em todas as direções. Controla a duração (data-aos-duration), o atraso (data-aos-delay), o offset (data-aos-offset) e até a âncora (data-aos-anchor), quando a animação de um elemento está ligada ao aparecimento de outro.

Vantagens:

• Configuração em 5 minutos, três linhas de código e atributos data
• Mais de 30 funções de easing integradas, animações em cascata e por âncora
• Repositório ativo, bugs são fechados, os issues têm 0 em atraso

Desvantagens:

• Dependência do autor: o projeto está vivo, mas as atualizações são pouco frequentes (o último lançamento é o 2.3.1)
• Abordagem puramente CSS: sem lógica programática (animações condicionais, parâmetros dinâmicos)

Use o AOS quando: precisa de velocidade de desenvolvimento, mais de 30 efeitos prontos a usar, animação numa landing page típica com uma dúzia de blocos.

ScrollReveal, uma alternativa JavaScript-first

O ScrollReveal é uma biblioteca da mesma classe com mais de 22 000 estrelas no GitHub. Ao contrário do AOS, é controlado a partir de JavaScript, não de atributos data.

1
ScrollReveal().reveal('.block', {
2
  delay: 200,
3
  distance: '50px',
4
  origin: 'bottom',
5
  duration: 600,
6
  reset: true
7
});

Diferença chave em relação ao AOS: API completa em JS. Altera os parâmetros da animação programaticamente, carrega-os do servidor, vincula-os a condições. Para lógica complexa, isto resolve.

Vantagens:

• Controlo por JS: pode gerir a animação a partir de qualquer ponto do código
• reset: true, animação repetida ao fazer scroll para cima e para baixo novamente
• Suporte para seletores CSS de qualquer complexidade

Desvantagens:

• Curva de aprendizagem ligeiramente mais acentuada do que o AOS, sem abordagem visual por atributos data
• Menos funções de easing integradas

A escolha entre AOS e ScrollReveal resume-se a uma coisa: atributos data ou JavaScript. Para uma landing típica, opte pelo AOS. Para uma SPA onde a animação faz parte da lógica de negócio, opte pelo ScrollReveal.

Revealator: uma nota histórica

O Revealator é um plugin jQuery da QODIO que, entre 2016 e 2018, foi uma solução simples para animar blocos: anexa classes como revealator-fade, revealator-slideup e revealator-zoomout, e os elementos aparecem ao fazer scroll. A página de demonstração no jQueryScript ainda funciona, pode ver os efeitos.

O problema é que o repositório no GitHub foi arquivado em abril de 2023 com a nota "DEPRECATED, no longer actively maintained." O último commit significativo foi em dezembro de 2020. O plugin puxa o jQuery como dependência num mundo onde 97% dos sites já não usam jQuery para novas funcionalidades. Não há suporte, os bugs não são corrigidos, as APIs modernas dos browsers não são usadas.

Não use o Revealator em novos projetos. Se o encontrar numa codebase antiga, migre para o Intersection Observer ou AOS. A tarefa é a mesma, mas o desempenho e a manutenibilidade são uma ordem de grandeza superiores.

Comparação das abordagens

Para uma landing rápida, o AOS é suficiente. Para uma SPA com controlo programático, ScrollReveal. Para um projeto com requisitos de desempenho rigorosos e tolerância zero a dependências, Intersection Observer puro. O Revealator está fora da corrida.

Veja a análise de 6 minutos de Kevin Powell, onde ele mostra animação de revelação acionada por scroll com CSS puro e Intersection Observer, sem uma única biblioteca.

⁉️🤔 Perguntas comuns

Porquê usar animação de revelação numa landing page, isso não torna o site mais lento?

Uma animação bem feita não torna as coisas mais lentas. O Intersection Observer funciona de forma assíncrona, fora da thread principal, as animações CSS são renderizadas na GPU via transform e opacity, não é desencadeado nenhum repaint. Os problemas começam quando se anima width, height ou left/top, isso sacode o layout. Bibliotecas como o AOS apenas animam transform e opacity. A regra principal é não animar geometria.

Pode usar-se o AOS num site com uma framework JS pesada, React ou Vue?

Pode, mas com uma ressalva: o AOS faz scan ao DOM na inicialização e não vê elementos adicionados reativamente após AOS.init(). A solução é chamar AOS.refresh() após a montagem do componente. Em React, isso é no useEffect, em Vue, no mounted. Para uma integração profunda com o state, o ScrollReveal é mais conveniente, uma vez que é gerido puramente a partir de JS.

Como é que o Intersection Observer é melhor do que a abordagem antiga com eventos de scroll do jQuery?

A abordagem jQuery anexa um listener ao scroll, o evento dispara dezenas de vezes por segundo, cada chamada lê a geometria do elemento (desencadeia reflow), o site fica lento. O Intersection Observer funciona de forma assíncrona, o callback é invocado uma vez na mudança real de visibilidade. Numa página com 50 blocos animados, a diferença de desempenho é de cerca de 40 vezes a favor do Observer, de acordo com testes dos developers do WebKit.

O que fazer se a animação gaguejar em dispositivos móveis?

Primeiro, verifique se está apenas a animar transform e opacity. Segundo, adicione will-change: transform, opacity ao elemento antes de a animação começar e remova-o depois. Terceiro, em dispositivos fracos, reduza a duration para 200-300 ms: uma animação rápida é percebida como mais suave do que uma animação lenta e gaguejante. Em dispositivos com uma taxa de atualização de ecrã de 60 Hz, uma animação com menos de 300 ms não tem tempo para cansar o olho.

É possível fazer animação de revelação sem JavaScript de todo?

Parcialmente, através de CSS Scroll-driven Animations, mas a especificação ainda é experimental: funciona no Chrome 115+, mas não no Firefox ou Safari. Para produção, precisa do Intersection Observer (nativo, sem bibliotecas) ou de um polyfill. Para um site de produção em 2026, a opção mínima é o Intersection Observer sem bibliotecas: JS nativo, zero dependências, suporte total.

Que abordagem escolher para uma landing page em 2026

Se está a fazer uma landing típica com 5 a 10 blocos e um prazo "para ontem", AOS. Três linhas de código, 30 efeitos, difícil de fazer asneira.

Se é uma SPA em React/Vue e a animação está ligada à lógica de negócio, ScrollReveal. O controlo programático compensa os 5 minutos extra de configuração.

Se o orçamento de desempenho é rigoroso e o designer desenhou animações únicas, Intersection Observer. Zero kilobytes, controlo total sobre o CSS, velocidade máxima.

Não use o Revealator. O plugin era bom em 2016, mas o mundo seguiu em frente.

Experimente o AOS numa página de teste, npm install aos --save ou CDN em 5 minutos. Sinta a diferença entre uma landing estática e uma página onde os blocos ganham vida ao fazer scroll. Escreva nos comentários qual a abordagem que escolheu e porquê.