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 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 paralaxe ou indicadores de leitura que se movem conforme você rola a tela.

Um tipo semelhante de animação de rolagem é aquela que é vinculada à posição de um elemento dentro do contêiner de rolagem. Com ela, por exemplo, os elementos podem aparecer gradualmente à 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 leva a dois problemas principais:

• Os navegadores modernos executam 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 de alto desempenho sincronizadas com a rolagem.

No Chrome 115, há um novo conjunto de APIs e conceitos que você pode usar para ativar animações declarativas de rolagem: linhas do tempo de rolagem e de visualização.

Esses novos conceitos se integram à API Web Animations (WAAPI) existente e à API CSS Animations, permitindo que eles herdem as vantagens dessas APIs existentes. 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, impulsionadas pela rolagem e executadas na linha de execução principal, com apenas algumas linhas de código extra. Do que você 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 at-rule @keyframes. Vincule-o a um elemento usando a propriedade animation-name e defina um animation-duration para determinar a duração da animação. Há 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 dimensiona um elemento no eixo X enquanto também 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 fazer exatamente o mesmo. Para fazer 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 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 tempo de origem começa em 0 quando a página é carregada e avança conforme 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 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 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, observe 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 muitas vezes é 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 semelhante à forma como o IntersectionObserver funciona, que pode rastrear o quanto um elemento fica 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, é possível notar 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 do contêiner de rolagem.

✨ Faça um teste

Muitas vezes, a linha do tempo do progresso de visualização é abreviada como "linha do tempo de visualização". É possível segmentar partes específicas dela com base no tamanho do assunto, mas vamos abordar isso mais adiante.

Mais praticidade com as linhas do tempo do 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 pode ser definida 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. Juntos, o valor é scroll(root block).

Demonstração: indicador de progresso da leitura

Essa demonstração tem um indicador de progresso de leitura fixado na parte superior 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 fim do documento. Uma linha do tempo do progresso de rolagem anônima é usada para orientar a animação.

✨ Faça um teste

O indicador de progresso da leitura fica na parte superior da página usando a posição fixa. Para usar animações compostas, a width não está sendo animada, 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 é dado a scroll(), então ele vai retornar aos valores padrão.

O botão de rolagem padrão para rastrear é o nearest, e o eixo padrão é block. Isso segmenta 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á 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 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;
}

É possível combinar scroll-timeline-name e scroll-timeline-axis na abreviação scroll-timeline. Exemplo:

scroll-timeline: --my-scroller inline;

Demonstração: indicador de etapas do carrossel horizontal

Esta demonstração apresenta um indicador de etapas 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á em visualização, o que é determinado pelo usuário rolar 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á totalmente posicionado no elemento de 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 na horizontal e é o elemento que rola a tela. Ao acompanhar a posição de rolagem, a .gallery__progress fica animada. Isso é feito consultando a linha do tempo do progresso de rolagem --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 propriedade com o source e o axis que você quer rastrear.

• source: uma referência ao elemento cujo botão de rolagem você quer rastrear. Use document.documentElement para direcionar o botão de rolagem 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 anexá-lo a uma animação da Web, transmita-o como a propriedade timeline e omita qualquer duration, se houver.

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

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

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: a timeline criada rastreia o botão de rolagem raiz e aumenta a #progress no eixo X de 0% a 100% conforme você rola a página.

✨ Faça um teste

Pratique 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 que cruza o botão de rolagem no eixo do bloco, use view(block). De forma semelhante ao scroll(), defina esse valor 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 aparecerá gradualmente à medida que 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: visualizar 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 da janela.

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.

Os períodos da linha do tempo de visualização que podem ser segmentados 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 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, é necessário configurar 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. O deslocamento do intervalo normalmente é uma porcentagem que varia de 0% a 100%, mas você também pode especificar um comprimento fixo, como 20em.

Por exemplo, se você quiser executar uma animação a partir do momento em que um objeto entra, escolha entry 0% como início do intervalo. Para que ele termine no horário inserido pelo assunto, escolha entry 100% como um valor para o fim do intervalo.

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

Assista a uma gravação

Como você pode notar enquanto usa as ferramentas "Visualizar períodos da linha do tempo", alguns intervalos podem ser segmentados por duas combinações diferentes de nome de intervalo + deslocamento. Por exemplo, entry 0%, entry-crossing 0% e cover 0% segmentam a mesma área.

Quando os valores de início e fim do intervalo têm 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 o animation-range: entry, que é muito mais curto.

Demonstração: Revelação de imagens

Esta demonstração esmaece as imagens à 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 esteja com opacidade total na metade do botão de rolagem.

✨ Faça um teste

O efeito de expansão é alcançado usando um clipe de vídeo animado. O CSS usado para esse efeito é o seguinte:

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

Demonstração: Revelação de imagens

Reformulando a demonstração de revelação da imagem, 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 dentro do 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 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 propriedade 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 acompanhado. Assim como na variante CSS, os valores aceitos são block, inline, x e y.
• inset: um ajuste (positivo) ou de abertura (negativo) da janela de rolagem ao determinar se a caixa está ou não sendo exibida.

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

Para anexá-lo a uma animação da Web, transmita-o como a propriedade timeline e omita qualquer duration, se houver. Como opção, 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 recursos para testar

Como anexar vários períodos de visualização da linha do tempo com um conjunto de frames-chave

Vamos dar uma olhada nesta demonstração da lista de contatos em que as entradas da lista são animadas. À medida que uma entrada de lista entra na janela de rolagem a partir da parte inferior, ela desliza e desaparece gradualmente e, à medida que sai da janela de rolagem na parte superior, desliza e desaparece.

✨ Faça um teste

Nesta demonstração, cada elemento é decorado com uma linha do tempo de visualização que rastreia o elemento à medida que ele cruza a janela de rolagem, mas duas animações de 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 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 a rolar somente ancestrais. No entanto, muitas vezes o elemento que precisa ser animado não é um filho do botão de rolagem que precisa ser rastreado.

Para que isso funcione, a propriedade timeline-scope entra em cena. Você usa essa propriedade para declarar uma linha do tempo com esse nome sem realmente criá-la. Assim, a linha do tempo com esse nome terá um escopo mais amplo. Na prática, a propriedade timeline-scope é usada 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 dela poderá encontrá-la e usá-la 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, ele só ficaria visível para os filhos, mas, como a .parent a definiu como a scroll-timeline-root, ela é anexada a ele.
• O elemento .subject usa a linha do tempo --tl. Ele atravessa sua árvore ancestral e encontra o --tl no .parent. Com o --tl no .parent apontando para o --tl de .scroller, o .subject basicamente rastreia 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 (também conhecida como elevação), 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 sobre o minisite scroll-driven-animations.style. O site inclui muitas outras demonstrações para destacar o que é possível com animações de rolagem.

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

✨ Faça um teste

Ou esta demonstração de empilhamento de cards que usam position: sticky. À medida que as cartas são empilhadas, os cartões já presos diminuem, criando um bom efeito de profundidade. No final, a pilha inteira desliza para fora da visualização como um grupo.

✨ Faça um teste

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

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