Configuração de animações vinculadas à rolagem
Acione animações CSS quando os elementos entrarem na área de visualização.
Configuração de animações vinculadas à rolagem é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O objetivo
Animações vinculadas à rolagem são executadas, pausadas ou invertidas com base na visibilidade do elemento. Exemplos: um aparecimento gradual do elemento principal quando uma seção entra na área visível, um número que aumenta enquanto está visível e um efeito de paralaxe vinculado à posição de rolagem. O IntersectionObserver aciona as animações; CSS ou a API de animações da Web as executa.
Animações baseadas em acionamento
O padrão mais simples é: quando um elemento entra na área visível, add uma classe CSS que contenha a animação. entry.target.classList.add("in-view") no callback do observer; a classe define animation: fade-in 600ms forwards.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}Configuração do observer
Crie um observer compartilhado, observe cada elemento que tenha a classe de acionamento, add "in-view" na interseção e use unobserve para evitar novos acionamentos. Para animações executadas uma única vez, isso é tudo de que precisa; para repetir ao entrar novamente, não use unobserve e remova a classe ao sair.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));Efeitos escalonados
Para revelar sequencialmente uma lista, aplique um atraso por item por meio de uma propriedade personalizada do CSS: style="--delay: ${i * 100}ms" em cada item; a animação lê animation-delay: var(--delay). Os itens são animados em cascata à medida que a lista entra na área visível.
Limite para um acionamento antecipado
threshold: 0.2 é acionado quando 20% do elemento está visível — geralmente um bom momento para animações "in-view". threshold: 0 é acionado cedo demais (com qualquer pixel) e parece abrupto; threshold: 1 é acionado tarde demais (quando está totalmente visível) e parece atrasado.
Vinculadas à rolagem vs. acionadas pela rolagem
Animações acionadas pela rolagem são executadas uma vez na interseção (como explicado acima). Animações vinculadas à rolagem avançam em sincronia com a posição de rolagem. A abordagem moderna usa animações orientadas pela rolagem em CSS (animation-timeline: scroll()), enquanto o IntersectionObserver continua útil para entrar e sair de zonas de acionamento.
Evitando instabilidade do layout
Anime propriedades que a GPU consegue transformar de forma econômica: transform e opacity. Evite animar top, left, width e height — elas acionam o layout a cada quadro, fazendo as animações vinculadas à rolagem travarem em dispositivos intermediários.
Respeite a redução de movimento
Envolva as declarações de animação em @media (prefers-reduced-motion: no-preference) para que usuários que solicitam movimento reduzido (por terem distúrbios vestibulares ou sensibilidade) recebam o estado final estático sem movimento. As animações decorativas devem ser totalmente desativadas quando o movimento reduzido estiver ativado.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}Padrão de desempenho
Use um único observer compartilhado, não um por elemento. Use unobserve depois que uma animação executada uma única vez for acionada. Use will-change com moderação — somente nos elementos que estiverem sendo animados, removendo-o quando a animação terminar. Observe o painel de desempenho para identificar quadros perdidos.
Animações bidirecionais
Para animações que devem ser invertidas quando o elemento sair da área visível, não use unobserve. No callback, alterne a classe com base em isIntersecting: entry.target.classList.toggle("in-view", entry.isIntersecting). A animação avança ao entrar e retrocede ao sair.
Combinação com a API de animações da Web
Para animações controladas por JS, substitua classList.add por entry.target.animate(keyframes, options). WAAPI retorna um objeto de animação que pode ser pausado, invertido ou encadeado por meio de promessas — é mais flexível que CSS para sequências complexas.
Verificação de conhecimentos
Por que é preferível animar transform e opacity em vez de top, left, width e height em animações vinculadas à rolagem?
Resumo
Animações vinculadas à rolagem combinam IntersectionObserver com classes de animação em CSS ou WAAPI. Defina um estado oculto, add "in-view" na interseção, anime transform e opacity (não top e left), respeite prefers-reduced-motion e escalone os itens por meio de propriedades personalizadas do CSS para criar revelações em cascata. Para animações completas baseadas no progresso da rolagem, considere as animações nativas orientadas pela rolagem (animation-timeline: scroll()).
Perguntas Frequentes
A aula “Configuração de animações vinculadas à rolagem” é grátis?
Sim — o texto completo de “Configuração de animações vinculadas à rolagem” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Configuração de animações vinculadas à rolagem”?
Acione animações CSS quando os elementos entrarem na área de visualização. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Configuração de animações vinculadas à rolagem”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- API IntersectionObserver e limiares
- Carregamento tardio com IntersectionObserver
- Implementação de rolagem infinita
- Configuração de animações vinculadas à rolagem