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 maneira declarativa.

Anima��es de rolagem

Anima��es de rolagem s�o um padr�o comum de UX na Web. Uma anima��o de rolagem est� vinculada � posi��o 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.

Um tipo semelhante de anima��o de rolagem � aquela vinculada � posi��o de um elemento dentro do cont�iner de rolagem. Com ele, por exemplo, os elementos podem aparecer � medida que aparecem.

A maneira cl�ssica de conseguir esses tipos de efeitos � responder a eventos de rolagem na linha de execu��o principal, o que causa 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 instabilidade.

Isso torna imposs�vel ou muito dif�cil criar anima��es de rolagem com bom desempenho em sincronia com a rolagem.

Na vers�o 115 do Chrome, h� um novo conjunto de APIs e conceitos que podem ser usados para ativar anima��es declarativas de rolagem: linhas do tempo de rolagem e linhas do tempo de visualiza��o.

Esses novos conceitos se integram � API Web Animations (WAAPI) e � API CSS Animations, permitindo que herdem as vantagens dessas APIs. Isso inclui a capacidade de executar anima��es de rolagem fora da linha de execu��o principal. Sim, leia corretamente: agora voc� pode ter anima��es suaves, conduzidas por rolagem, saindo da linha de execu��o principal com apenas algumas linhas de c�digo extra. Do que n�o gosta?!

Anima��es na Web (uma pequena recapitula��o)

Anima��es na Web com CSS

Para criar uma anima��o em CSS, defina um conjunto de frames-chave usando a configura��o @keyframes. Vincule-a a um elemento usando a propriedade animation-name e defina uma animation-duration para determinar quanto tempo a anima��o vai levar. Existem mais animation-* propriedades longas dispon�veis (animation-easing-function e animation-fill-mode, s� para citar algumas), que podem ser combinadas na abrevia��o animation.

Por exemplo, aqui est� uma anima��o que aumenta o tamanho de um elemento no eixo X e, ao mesmo tempo, muda a cor de fundo:

@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 alcan�ar exatamente o mesmo resultado. Para isso, crie novas inst�ncias de 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 anterior do CSS.

Linhas do tempo de anima��o

Por padr�o, uma anima��o anexada a um elemento � executada na linha do tempo do documento. O hor�rio de origem come�a em 0 quando a página é carregada e começa a ir para frente à medida que o tempo avança. 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 orientadas por rolagem define dois novos tipos de linhas do tempo que podem ser usadas:

• 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 no 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 scrollport ou scroller, ao longo de um eixo específico. Ele converte uma posição de um intervalo 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, você pode ver que o progresso aumenta de 0% a 100% à medida que você rola o botão de cima para baixo.

✨ Faça um teste

Uma linha do tempo do progresso de rolagem geralmente é abreviada para simplesmente "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, é a posição relativa de um objeto dentro desse botão que determina o progresso.

Isso é parecido com o funcionamento do IntersectionObserver, 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, observe que o progresso começa a aumentar a partir de 0%, quando o objeto entra no contêiner de rolagem, e atinge 100% no mesmo momento em que ele sai do contêiner.

✨ Faça um teste

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

Prático com as linhas do tempo de progresso de rolagem

Como criar uma linha do tempo do progresso de rolagem anônima no CSS

A maneira mais fácil de criar uma linha do tempo de rolagem no 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 transmitidos para scroll() s�o root e block. Em conjunto, o valor � scroll(root block).

Demonstra��o: indicador do progresso da leitura

Esta demonstra��o tem um indicador de progresso de leitura fixado na parte de cima da janela de visualiza��o. Conforme 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 do progresso de rolagem an�nima � usada para conduzir a animação.

✨ Faça um teste

O indicador do progresso da leitura é posicionado na parte superior da página usando a posição fixa. Para aproveitar as animações compostas, não a width está sendo animada, mas o elemento é reduzido no eixo x usando uma 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 para scroll(), então ele vai voltar aos valores padrão.

O botão de rolagem padrão a ser monitorado é nearest, e o eixo padrão é block. Isso direciona efetivamente o botão 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 do progresso de rolagem nomeada no 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á visando um botão de rolagem pai 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 como um identificador de sua preferência. O valor precisa começar com --.

Para ajustar qual eixo acompanhar, 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, você pode combinar scroll-timeline-name e scroll-timeline-axis na abreviação de scroll-timeline. Exemplo:

scroll-timeline: --my-scroller inline;

Demonstração: indicador de etapa do carrossel horizontal

Esta demonstração apresenta um indicador de passos acima de cada carrossel de imagens. Quando um carrossel contém três imagens, a barra indicadora começa com 33% de largura para indicar que você está vendo a imagem um de três. Quando a última imagem está na visualização, o que é determinado pelo botão de rolagem rolado até o fim, o indicador ocupa toda a largura do botão. Uma linha do tempo do progresso de rolagem nomeada é usada para conduzir a animação.

✨ Faça um teste

A marcação base 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 está absolutamente posicionado no 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 mostra os elementos .gallery__entry contidos horizontalmente e é o elemento que rola. Ao rastrear a posição de rolagem, o .gallery__progress fica 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 do 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 acompanhar.

• source: uma referência ao elemento que tem o botão de rolagem que você quer rastrear. Use document.documentElement para direcionar ao botão de rolagem raiz.
• axis: determina qual eixo acompanhar. Assim como na variante CSS, os valores aceitos são block, inline, x e y.

const tl = new ScrollTimeline({
  source: document.documentElement,
});

Para anexá-la a uma animação da Web, transmita-a como a propriedade timeline e omita as duration, se houver.

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

Demonstração: indicador do progresso da leitura, revisado

Para recriar o indicador do progresso de leitura com JavaScript usando a mesma marcação, use este 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 do CSS: o timeline criado rastreia o botão de rolagem raiz e escalona o #progress no eixo x de 0% a 100% conforme você rola a página.

✨ Faça um teste

Prático com a linha do tempo do progresso de visualização

Como criar uma linha do tempo do progresso de visualiza��o an�nima no 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 em interse��o com o bot�o de rolagem no eixo do bloco, use view(block). De forma semelhante a scroll(), defina-o como o valor para a propriedade animation-timeline e n�o se esque�a de definir animation-duration como auto.

Usando o c�digo a seguir, cada img aparecer� gradualmente � medida que cruzar a janela de visualiza��o enquanto voc� rola.

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

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

Intermezzo: ver per�odos da linha do tempo

Por padr�o, uma anima��o vinculada � linha do tempo de visualiza��o � anexada a todo o per�odo da linha do tempo. Isso come�a no momento em que o elemento est� prestes a entrar na janela de rolagem e termina quando ele sai completamente dela.

Tamb�m � poss�vel vincular a uma parte espec�fica da linha do tempo de visualiza��o especificando o per�odo ao qual ela deve ser anexada. 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.

Estes s�o os per�odos que voc� pode segmentar:

• 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 visualiza��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, configure um in�cio e um fim de intervalo. Cada um consiste em nome de intervalo (veja a lista acima) e um deslocamento de intervalo para determinar a posi��o dentro desse nome de intervalo. O deslocamento de intervalo 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 a partir do momento em que o objeto entrar no objeto, escolha entry 0% como o in�cio do intervalo. Para que ela seja conclu�da no momento em que o assunto for inserido, escolha entry 100% como um valor para o fim do intervalo.

No CSS, defina isso 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 do intervalo como cover 50%. Em seguida, arraste a barra de rolagem para ver o resultado da animação.

Assistir a uma gravação

Como você pode notar ao testar as ferramentas de visualização de intervalos da linha do tempo, alguns intervalos podem ser segmentados por duas combinações diferentes de nome e deslocamento de intervalo. Por exemplo, entry 0%, entry-crossing 0% e cover 0% segmentam a mesma área.

Quando o início e o fim do intervalo segmentam o mesmo nome de intervalo e abrangem todo o intervalo, de 0% a 100%, é possível reduzir o valor para simplesmente o nome do intervalo. Por exemplo, animation-range: entry 0% entry 100%; pode ser reescrito para animation-range: entry, que é muito mais curto.

Demonstração: Revelação de imagem

Essa demonstração faz as imagens aparecerem gradualmente à medida que 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 fique com opacidade total quando estiver na metade do botão de rolagem.

✨ Faça um teste

O efeito de expansão é conseguido com o uso de um caminho de corte 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%;
}

Como criar uma linha do tempo do progresso de visualização nomeada no CSS

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

O mesmo tipo de valores se aplica e as mesmas regras para procurar uma linha do tempo nomeada são aplicadas.

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

Reformulando 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%;
}

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

✨ Faça um teste

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

Para criar uma linha do tempo de visualização em JavaScript, crie uma nova instância da classe ViewTimeline. Transmita um bag 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 botão de rolagem.
• 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 encarte (positivo) ou (negativo) de encarte da janela de rolagem ao determinar se a caixa está visível.

const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Para anexá-la a uma animação da Web, transmita-a como a propriedade timeline e omita as duration, se houver. Se quiser, transmita as informações do intervalo usando as propriedades rangeStart e rangeEnd.

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

✨ Faça um teste

Mais coisas para testar

Como anexar a v�rios intervalos de linha do tempo de visualiza��o com um conjunto de frames-chave

Vamos conferir esta demonstra��o da 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 + aparece gradualmente e, � medida que sai da janela de rolagem na parte superior, ela desliza + desaparece.

✨ Faça um teste

Para esta demonstração, cada elemento é decorado com uma linha do tempo de visualização que rastreia o elemento à medida que ele cruza sua janela de rolagem, mas duas animações de rolagem estã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.

@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 intervalos 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.

✨ Faça um teste

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

O mecanismo de pesquisa para linhas do tempo de rolagem nomeadas e linhas do tempo de visualização nomeadas é limitado apenas a ancestrais de rolagem. Muitas vezes, no entanto, o elemento que precisa ser animado não é filho do botão de rolagem que precisa ser rastreado.

Para que isso funcione, a propriedade timeline-scope é usada. Você usa essa propriedade para declarar uma linha do tempo com esse nome sem realmente criá-la. Isso dá ao cronograma 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 botão de rolagem 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 filho dele pode encontrá-lo e usá-lo como um valor para a propriedade animation-timeline.
• Na verdade, o elemento .scroller define uma linha do tempo de rolagem com o nome --tl. Por padrão, ela seria visível apenas para os filhos, mas como a .parent o definiu como scroll-timeline-root, ela é anexada a ela.
• O elemento .subject usa a linha do tempo --tl. Ele sobe pela árvore ancestral e encontra --tl no .parent. Com o --tl no .parent apontando para o --tl do .scroller, o .subject vai rastrear a linha do tempo do progresso de rolagem do .scroller.

Em outras palavras, é possível usar timeline-root para mover uma linha do tempo até um ancestral (ou seja, elevar) para que todos os filhos do ancestral possam acessá-la.

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 são sobre o minisite scroll-driven-animations.style. O site inclui muitas outras demonstrações para destacar o que é possível fazer com as animações de rolagem.

Uma das demonstrações adicionais é esta lista de capas de álbuns. Cada capa gira em 3D à medida que recebe o holofote central.

✨ Faça um teste

Ou esta demonstração de empilhamento de cartões que usa position: sticky. Conforme os cards se acumulam, os cards já presos são reduzidos, criando um bom efeito de profundidade. No final, a pilha inteira sai da visualização em grupo.

✨ Faça um teste

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

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