Scroll-Triggered Animation

O progresso da animação fica ligado diretamente à posição de rolagem, então rolar para a frente ou para trás a reproduz ou a rebobina.

Adicione uma "Scroll-Linked Animation" (também chamada de scroll-driven animation ou scroll scrub) em [onde].
A animação deve acompanhar exatamente a posição de rolagem: rolar para baixo a faz avançar e rolar para cima a rebobina na hora, sem easing próprio baseado em tempo.
Mapeie a animação inteira para um trecho de rolagem bem definido e mostre um estado estático adequado se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento sobe um pouco enquanto aparece, como se estivesse se encaixando no lugar.

Adicione uma animação de entrada "Fade Up" (também chamada fade-in-up ou reveal on scroll) em [onde].
Os elementos devem subir levemente enquanto aparecem, na primeira vez que entram na tela ao rolar: sutil e rápido, sem efeito de quique.
Reproduza só uma vez e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os itens de um grupo se animam um após o outro com um pequeno atraso, formando uma onda em vez de aparecerem todos de uma vez.

Adicione uma animação "Stagger" (também chamada staggered animation ou cascata) em [onde].
Os itens devem aparecer subindo um após o outro com um atraso curto e uniforme, para que o grupo pareça uma onda rápida e não tudo de uma vez.
Mantenha a sequência curta mesmo em listas longas, reproduza só uma vez ao entrar na tela e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

As palavras de um parágrafo passam de apagadas para opacidade total conforme o usuário rola.

Adicione um efeito "Text Reveal" (também chamado de scroll text reveal ou word-by-word reveal) em [onde].
O parágrafo deve começar apagado e, conforme o usuário rola, cada palavra deve clarear até a intensidade total, uma após a outra, vinculada à posição de rolagem.
Ao rolar de volta para cima, as palavras devem apagar de novo, e o parágrafo inteiro deve continuar disponível para leitores de tela, qualquer que seja o esmaecimento.

A rolagem e os saltos para âncoras deslizam com suavização em vez de se moverem de forma brusca.

Adicione uma rolagem suave (Smooth Scroll, também chamada de smooth scrolling ou inertia scroll) em [onde].
A rolagem e os saltos para âncoras devem deslizar e desacelerar suavemente em vez de andar aos trancos, com sensação leve e responsiva, sem atraso pesado.
Mantenha o comportamento nativo, como rolagem pelo teclado, barra de rolagem e busca na página, e desligue a suavização se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os cards ficam fixos no topo durante a rolagem e se empilham uns sobre os outros, muitas vezes encolhendo os anteriores.

Adicione "Stacking Cards" (também chamados de sticky stacking cards ou card stack scroll) em [onde].
Conforme o leitor rola, cada card deve ficar fixo perto do topo e o próximo deve subir por cima dele, enquanto os de baixo encolhem um pouco, formando uma pilha organizada.
Deixe aparecer uma borda fina de cada card anterior e dê ao último espaço suficiente para chegar à sua posição antes do fim da seção.

Um cabeçalho fixo diminui de altura ou tamanho depois que o usuário rola para baixo.

Adicione um "Sticky Header Shrink" (também chamado de shrinking header ou shrink on scroll) em [onde].
O cabeçalho deve ficar no topo e, assim que o leitor rolar um pouco, encolher suavemente para uma barra mais fina com um logo menor, voltando a crescer quando ele retornar ao topo.
Não deixe o conteúdo abaixo pular enquanto o cabeçalho muda de tamanho.