Animar elementos na rolagem com animações de rolagem

Aprenda a trabalhar com linhas do tempo de rolagem e de visualização para criar animações de rolagem de forma declarativa.

Bramus

Publicado em: 5 de maio de 2023

Animações de rolagem

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

As animações de rolagem são um padrão comum de UX na Web. Uma animação de rolagem é vinculada à posição de rolagem de um contêiner de rolagem. Isso significa que, conforme você rola para cima ou para baixo, a animação vinculada vai para frente ou para trás em resposta direta. Exemplos disso são efeitos como imagens de fundo com efeito paralaxe ou indicadores de leitura que se movem conforme você rola a tela.

Um indicador de leitura na parte de cima de um documento, controlado pela rolagem.

Um tipo semelhante de animação de rolagem é uma animação vinculada à posição de um elemento dentro do contêiner de rolagem. Com ele, por exemplo, os elementos podem aparecer gradualmente à medida que entram na visualização.

As imagens nesta página aparecem gradualmente à medida que entram em exibição.

A maneira clássica de conseguir esses tipos de efeitos é responder a eventos de rolagem na linha de execução principal, o que leva a dois problemas principais:

  • Os navegadores modernos realizam a rolagem em um processo separado e, portanto, entregam eventos de rolagem de forma assíncrona.
  • As animações da linha de execução principal estão sujeitas a travamentos.

Isso torna impossível ou muito difícil criar animações de rolagem com bom desempenho e sincronizadas com a rolagem.

A partir da versão 115 do Chrome, há um novo conjunto de APIs e conceitos que podem ser usados para ativar animações declarativas baseadas em rolagem: linhas do tempo de rolagem e linhas do tempo de visualização.

Esses novos conceitos se integram à API Web Animations (WAAPI, na sigla em inglês) e à API CSS Animations atuais, permitindo que elas herdem as vantagens dessas APIs. Isso inclui a capacidade de executar animações baseadas em rolagem fora da linha de execução principal. Isso mesmo: agora você pode ter animações suaves e fluidas, impulsionadas pela rolagem, executadas fora da linha de execução principal, com apenas algumas linhas de código extra. Tem como não gostar?!

Animações na Web: um pequeno resumo

Animações na Web com CSS

Para criar uma animação em CSS, defina um conjunto de frames-chave usando a regra-at @keyframes. Vincule a animação a um elemento usando a propriedade animation-name e defina um animation-duration para determinar a duração da animação. Há mais propriedades abreviadas animation-* disponíveis, como animation-easing-function e animation-fill-mode, que podem ser combinadas na abreviação animation.

Por exemplo, esta é uma animação que aumenta um elemento no eixo X e muda a cor de segundo plano dele:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

Animações na Web com JavaScript

Em JavaScript, a API Web Animations pode ser usada para conseguir exatamente o mesmo. Para isso, crie novas instâncias Animation e KeyFrameEffect ou use o método Element animate(), que é muito mais curto.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Esse resultado visual do snippet JavaScript acima é idêntico à versão CSS anterior.

Cronogramas de animação

Por padrão, uma animação anexada a um elemento é executada na linha do tempo do documento. O tempo de origem começa em 0 quando a página é carregada e avança conforme o tempo passa. Esta é a linha do tempo de animação padrão e, até agora, era a única à qual você tinha acesso.

A especificação de animações de rolagem define dois novos tipos de linhas do tempo que você pode usar:

  • Linha do tempo do progresso de rolagem: uma linha do tempo vinculada à posição de rolagem de um contêiner de rolagem ao longo de um eixo específico.
  • Linha do tempo do progresso de visualização: uma linha do tempo vinculada à posição relativa de um elemento específico dentro do contêiner de rolagem.

Rolar a linha do tempo do progresso

Uma linha do tempo do progresso de rolagem é uma linha do tempo de animação vinculada ao progresso na posição de rolagem de um contêiner de rolagem, também chamado de janela de rolagem ou botão de rolagem, ao longo de um eixo específico. Ele converte uma posição de um período de rolagem em uma porcentagem de progresso.

A posição de rolagem inicial representa 0% de progresso, e a final representa 100% de progresso. Na visualização a seguir, observe que o progresso aumenta de 0% a 100% à medida que você rola o botão de cima para baixo.

Visualização de uma linha do tempo do progresso de rolagem. À medida que você rola para baixo até a parte de baixo do botão, o valor do progresso aumenta de 0% a 100%.

✨ Teste por conta própria

Uma linha do tempo do progresso de rolagem geralmente é abreviada como "linha do tempo de rolagem".

Linha do tempo do progresso de visualização

Esse tipo de linha do tempo está vinculado ao progresso relativo de um elemento específico dentro de um contêiner de rolagem. Assim como uma linha do tempo do progresso de rolagem, o deslocamento de rolagem de um botão é rastreado. Ao contrário de uma linha do tempo do progresso de rolagem, essa é a posição relativa de um objeto dentro desse botão que determina o progresso.

Isso é um pouco comparável a como o IntersectionObserver funciona, que pode rastrear o quanto um elemento é visível na rolagem. Se o elemento não estiver visível no botão, não há interseção. Caso esteja visível, mesmo para a menor parte, então há interseção.

A linha do tempo do progresso de visualização se inicia no momento em que um objeto começa a cruzar com o botão de rolagem e termina quando ele para de cruzar com o botão. Na visualização a seguir, você pode ver que o progresso começa a aumentar de 0% quando o objeto entra no contêiner de rolagem e atinge 100% no momento em que ele sai.

Visualização de uma linha do tempo do progresso da visualização. O progresso aumenta de 0% a 100% à medida que o objeto (caixa verde) cruza o botão de rolagem.

✨ Teste por conta própria

Uma linha do tempo do progresso de visualização geralmente é abreviada para "linha do tempo de visualização". É possível segmentar partes específicas de uma linha do tempo de visualização com base no tamanho do assunto, mas vamos falar mais sobre isso depois.

Praticando com linhas do tempo de progresso de rolagem

Criar uma linha do tempo de progresso de rolagem anônima em CSS

A maneira mais fácil de criar uma linha do tempo de rolagem em CSS é usar a função scroll(). Isso cria uma linha do tempo de rolagem anônima que você pode definir como o valor da nova propriedade animation-timeline.

Exemplo:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

A função scroll() aceita um <scroller> e um argumento <axis>.

Os valores aceitos para o argumento <scroller> são:

  • nearest: usa o contêiner de rolagem ancestral mais próximo (padrão).
  • root: usa a janela de visualização do documento como contêiner de rolagem.
  • self: usa o próprio elemento como o contêiner de rolagem.

Os valores aceitos para o argumento <axis> são:

  • block: usa a medida de progresso ao longo do eixo do bloco do contêiner de rolagem (padrão).
  • inline: usa a medida de progresso ao longo do eixo em linha do contêiner de rolagem.
  • y: usa a medida de progresso ao longo do eixo y do contêiner de rolagem.
  • x: usa a medida de progresso ao longo do eixo x do contêiner de rolagem.

Por exemplo, para vincular uma animação ao botão de rolagem raiz no eixo do bloco, os valores a serem passados para scroll() são root e block. Juntos, o valor é scroll(root block).

Demonstração: indicador de progresso de leitura

Esta demonstração tem um indicador de progresso de leitura fixado na parte de cima da janela de visualização. À medida que você rola a página para baixo, a barra de progresso aumenta até ocupar toda a largura da janela de visualização ao chegar ao final do documento. Uma linha do tempo de progresso de rolagem anônima é usada para acionar a animação.

Demonstração: indicador de progresso de leitura.

✨ Teste por conta própria

O indicador de progresso de leitura é posicionado na parte de cima da página usando a posição fixa. Para aproveitar as animações combinadas, não é o width que está sendo animado, mas o elemento é reduzido no eixo x usando um transform.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

A linha do tempo da animação grow-progress no elemento #progress é definida como uma linha do tempo anônima criada usando scroll(). Nenhum argumento é fornecido a scroll(), então ele vai usar os valores padrão.

O scroller padrão a ser rastreado é o nearest, e o eixo padrão é block. Isso segmenta efetivamente o controle de rolagem raiz, já que ele é o mais próximo do elemento #progress, enquanto rastreia a direção do bloco.

Como criar uma linha do tempo de progresso de rolagem nomeada em CSS

Uma forma alternativa de definir uma linha do tempo do progresso de rolagem é usar uma já nomeada. É um pouco mais detalhado, mas pode ser útil quando você não está direcionando um botão de rolagem principal ou o botão de rolagem raiz, ou quando a página usa várias linhas do tempo ou quando as pesquisas automáticas não funcionam. Dessa forma, você pode identificar uma linha do tempo do progresso de rolagem pelo nome que você deu a ela.

Para criar uma linha do tempo do progresso de rolagem nomeada em um elemento, defina a propriedade CSS scroll-timeline-name no contêiner de rolagem com um identificador de sua preferência. O valor precisa começar com --.

Para ajustar qual eixo rastrear, declare também a propriedade scroll-timeline-axis. Os valores permitidos são os mesmos do argumento <axis> de scroll().

Por fim, para vincular a animação à linha do tempo do progresso da rolagem, defina a propriedade animation-timeline no elemento que precisa ser animado com o mesmo valor do identificador usado para o scroll-timeline-name.

Exemplo de código:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

Se quiser, combine scroll-timeline-name e scroll-timeline-axis no atalho scroll-timeline. Exemplo:

scroll-timeline: --my-scroller inline;

Esta demonstração apresenta um indicador de etapa mostrado acima de cada carrossel de imagens. Quando um carrossel contém três imagens, a barra de indicador começa com 33% de largura para indicar que você está olhando a imagem um de três. Quando a última imagem está visível (determinado pelo scroller ter rolado até o final), o indicador ocupa toda a largura do scroller. Uma linha do tempo do progresso de rolagem nomeada é usada para impulsionar a animação.

Demonstração: indicador de etapa do carrossel horizontal.

✨ Teste por conta própria

A marcação básica de uma galeria é esta:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

O elemento .gallery__progress tem posição absoluta dentro do elemento wrapper .gallery. O tamanho inicial é determinado pela propriedade personalizada --num-images.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

O .gallery__scrollcontainer organiza os elementos .gallery__entry contidos horizontalmente e é o elemento que rola. Ao rastrear a posição de rolagem, o .gallery__progress é animado. Isso é feito referindo-se à linha do tempo do progresso de rolagem nomeada --gallery__scrollcontainer.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

Como criar uma linha do tempo de progresso de rolagem com JavaScript

Para criar uma linha do tempo de rolagem em JavaScript, crie uma nova instância da classe ScrollTimeline. Transmita um pacote de propriedades com o source e o axis que você quer rastrear.

  • source: uma referência ao elemento cujo scroller você quer rastrear. Use document.documentElement para segmentar o scroller raiz.
  • axis: determina qual eixo rastrear. Assim como na variante CSS, os valores aceitos são block, inline, x e y.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

Para anexar a uma animação da Web, transmita como a propriedade timeline e omita qualquer duration, se houver.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Demonstração: indicador de progresso de leitura, revisitado

Para recriar o indicador de progresso de leitura com JavaScript, usando a mesma marcação, use o seguinte código JavaScript:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

O resultado visual é idêntico na versão CSS: o timeline criado acompanha o scroller raiz e dimensiona o #progress no eixo x de 0% a 100% à medida que você rola a página.

✨ Teste por conta própria

Como usar a linha do tempo do progresso de visualização

Como criar uma linha do tempo do progresso de visualização anônima em CSS

Para criar uma linha do tempo do progresso de visualização, use a função view(). Os argumentos aceitos são <axis> e <view-timeline-inset>.

  • O <axis> é o mesmo da linha do tempo do progresso de rolagem e define qual eixo rastrear. O valor padrão é block.
  • Com <view-timeline-inset>, é possível especificar um deslocamento (positivo ou negativo) para ajustar os limites quando um elemento é considerado visível ou não. O valor precisa ser uma porcentagem ou auto, sendo auto o valor padrão.

Por exemplo, para vincular uma animação a um elemento que se cruza com o botão de rolagem no eixo do bloco, use view(block). Semelhante a scroll(), defina isso como o valor da propriedade animation-timeline e não se esqueça de definir animation-duration como auto.

Usando o código a seguir, cada img vai aparecer gradualmente ao cruzar a janela de visualização enquanto você rola a tela.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: períodos da linha do tempo de visualização

Por padrão, uma animação vinculada à linha do tempo de visualização é anexada a todo o período dela. Isso começa a partir do momento em que o objeto está prestes a entrar na janela de rolagem e termina quando ele sai dela completamente.

Também é possível vincular a uma parte específica da linha do tempo de visualização especificando o período ao qual ele deve ser anexado. Por exemplo, isso pode acontecer apenas quando o objeto estiver entrando no botão de rolagem. Na visualização a seguir, o progresso começa a contar a partir de 0%, quando o objeto entra no contêiner de rolagem, mas chega logo a 100% a partir do momento em que está totalmente intersectado.

Uma linha do tempo de visualização definida para rastrear o intervalo de entrada do assunto. A animação só é executada enquanto o objeto está entrando na janela de rolagem.

Os possíveis períodos da linha do tempo de visualização que você pode segmentar são os seguintes:

  • cover: representa o período completo da linha do tempo do progresso da visualização.
  • entry: representa o período durante o qual a caixa principal está entrando no período de visibilidade do progresso da visualização.
  • exit: representa o período durante o qual a caixa principal está saindo do período de visibilidade do progresso da exibição.
  • entry-crossing: representa o período durante o qual a caixa principal cruza a borda final.
  • exit-crossing: representa o período durante o qual a caixa principal cruza a borda inicial.
  • contain: representa o período durante o qual a caixa principal é totalmente contida ou totalmente coberta por seu período de visibilidade do progresso da visualização dentro da janela de rolagem. Isso depende se o assunto está mais alto ou mais baixo do que o botão de rolagem.

Para definir um intervalo, é necessário definir um início e um fim. Cada um consiste em um nome de intervalo (consulte a lista acima) e um deslocamento de intervalo para determinar a posição dentro desse nome de intervalo. O intervalo de ajuste geralmente é uma porcentagem que varia de 0% a 100%, mas também é possível especificar um comprimento fixo, como 20em.

Por exemplo, se você quiser executar uma animação no momento em que um assunto entra, escolha entry 0% como o início do intervalo. Para que ele seja concluído quando o assunto for inserido, escolha entry 100% como um valor para o fim do intervalo.

Em CSS, isso é definido usando a propriedade animation-range. Exemplo:

animation-range: entry 0% entry 100%;

Em JavaScript, use as propriedades rangeStart e rangeEnd.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Use a ferramenta incorporada abaixo para ver o que cada nome de intervalo representa e como as porcentagens afetam as posições inicial e final. Tente definir o início do intervalo como entry 0% e o fim como cover 50%. Em seguida, arraste a barra de rolagem para conferir o resultado da animação.

O visualizador de períodos da linha do tempo de visualização, disponível em https://goo.gle/view-timeline-range-tool

Assistir uma gravação

Ao usar essas ferramentas, você vai notar que alguns intervalos podem ser segmentados por duas combinações diferentes de nome e deslocamento. Por exemplo, entry 0%, entry-crossing 0% e cover 0% segmentam a mesma área.

Quando o início e o fim do intervalo têm como destino o mesmo nome de intervalo e abrangem todo o intervalo (de 0% a 100%), é possível abreviar o valor para apenas o nome do intervalo. Por exemplo, animation-range: entry 0% entry 100%; pode ser reescrito como animation-range: entry, que é muito mais curto.

Demonstração: exibição de imagem

Esta demonstração mostra as imagens aparecendo gradualmente conforme elas entram na janela de rolagem. Isso é feito usando uma linha do tempo de visualização anônima. O intervalo de animação foi ajustado para que cada imagem tenha opacidade total quando estiver na metade do controle deslizante.

Demonstração: revelação de imagem

✨ Teste por conta própria

O efeito de expansão é alcançado usando um clip-path animado. O CSS usado para esse efeito é:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Criar uma linha do tempo do progresso de visualização nomeada em CSS

Assim como as linhas do tempo de rolagem têm versões nomeadas, você também pode criar linhas do tempo de visualização nomeadas. Em vez das propriedades scroll-timeline-*, use variantes com o prefixo view-timeline-, ou seja, view-timeline-name e view-timeline-axis.

O mesmo tipo de valores e as mesmas regras para pesquisar uma linha do tempo nomeada são válidos.

Demonstração: exibição de imagem, revisitada

Retomando a demonstração de revelação de imagem anterior, o código revisado fica assim:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

Usando view-timeline-name: revealing-image, o elemento será rastreado no scroller mais próximo. O mesmo valor é usado como valor da propriedade animation-timeline. A saída visual é exatamente a mesma de antes.

✨ Teste por conta própria

Como criar uma linha do tempo do progresso de visualização em JavaScript

Para criar uma linha do tempo de visualização em JavaScript, crie uma nova instância da classe ViewTimeline. Transmita um pacote de propriedades com o subject que você quer rastrear, axis e inset.

  • subject: uma referência ao elemento que você quer rastrear no próprio scroller.
  • axis: o eixo a ser rastreado. Assim como na variante CSS, os valores aceitos são block, inline, x e y.
  • inset: um ajuste de encartes (positivo) ou de encartes (negativo) da janela de rolagem ao determinar se a caixa está visível.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Para anexar a uma animação da Web, transmita como a propriedade timeline e omita qualquer duration, se houver. Se quiser, transmita informações de intervalo usando as propriedades rangeStart e rangeEnd.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ Teste por conta própria

Mais coisas para testar

Anexar a vários intervalos da linha do tempo de visualização com um conjunto de frames-chave

Vamos conferir esta demonstração de lista de contatos em que as entradas da lista são animadas. Quando uma entrada da lista entra na janela de rolagem pela parte de baixo, ela desliza e aparece. Quando ela sai pela parte de cima, ela desliza e desaparece.

Demonstração: lista de contatos

✨ Teste por conta própria

Nesta demonstração, cada elemento é decorado com uma linha do tempo de visualização que rastreia o elemento à medida que ele cruza a porta de rolagem, mas duas animações controladas por rolagem são anexadas a ele. A animação animate-in é anexada ao intervalo entry da linha do tempo, e a animação animate-out ao intervalo exit da linha do tempo.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

Em vez de executar duas animações diferentes anexadas a dois períodos diferentes, também é possível criar um conjunto de frames-chave que já contenha as informações do período.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Como os frames-chave contêm as informações de período, não é necessário especificar o animation-range. O resultado é exatamente o mesmo de antes.

✨ Teste por conta própria

Como anexar a uma linha do tempo de rolagem que não é ancestral

O mecanismo de pesquisa para linhas do tempo de rolagem e de visualização nomeadas é limitado apenas aos ancestrais de rolagem. No entanto, muitas vezes, o elemento que precisa ser animado não é filho do rolador que precisa ser rastreado.

Para que isso funcione, a propriedade timeline-scope entra em ação. Você usa essa propriedade para declarar uma linha do tempo com esse nome sem realmente criá-la. Isso dá à linha do tempo com esse nome um escopo mais amplo. Na prática, você usa a propriedade timeline-scope em um elemento pai compartilhado para que a linha do tempo de um scroller filho possa ser anexada a ele.

Exemplo:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

Neste snippet:

  • O elemento .parent declara uma linha do tempo com o nome --tl. Qualquer elemento filho pode encontrar e usar esse valor na propriedade animation-timeline.
  • O elemento .scroller define uma linha do tempo de rolagem com o nome --tl. Por padrão, ele só ficaria visível para os filhos, mas como .parent o definiu como scroll-timeline-root, ele é anexado a ele.
  • O elemento .subject usa a linha do tempo --tl. Ele percorre a árvore ancestral e encontra --tl no .parent. Com o --tl no .parent apontando para o --tl de .scroller, o .subject vai rastrear essencialmente a linha do tempo do progresso de rolagem de .scroller.

Em outras palavras, você pode usar timeline-root para mover uma linha do tempo até um ancestral (também conhecido como elevação), para que todos os filhos do ancestral possam acessar.

A propriedade timeline-scope pode ser usada com linhas do tempo de rolagem e de visualização.

Mais demonstrações e recursos

Todas as demonstrações abordadas neste artigo no mini-site scroll-driven-animations.style. O site inclui muito mais demonstrações para destacar o que é possível fazer com animações controladas por rolagem.

Uma das demonstrações adicionais é esta lista de capas de álbuns. Cada capa gira em 3D ao ocupar o centro das atenções.

Demonstração: Cover Flow

✨ Teste por conta própria

Ou esta demonstração de cards em pilha que aproveita o position: sticky. À medida que os cards são empilhados, os que já estão fixos diminuem, criando um efeito de profundidade interessante. No final, toda a pilha desliza para fora da tela como um grupo.

Demonstração: empilhamento de cards.

✨ Teste por conta própria

Também em destaque em scroll-driven-animations.style, há uma coleção de ferramentas, como a visualização do progresso do intervalo da linha do tempo de visualização, que foi incluída anteriormente nesta postagem.

As animações de rolagem também são abordadas em Novidades sobre animações na Web no Google I/O 2023.