Esta página foi traduzida pela API Cloud Translation.

Um estudo de caso sobre o desempenho de animações de rolagem

Yuriko Hirota

Quais são as novidades das animações de rolagem?

As animações de rolagem são uma maneira de adicionar interatividade e interesse visual ao seu site ou aplicativo da Web, acionadas pela posição de rolagem do usuário. Essa pode ser uma ótima maneira de manter os usuários engajados e tornar seu site mais atraente visualmente.

No passado, a única maneira de criar animações de rolagem era responder ao evento de rolagem na linha de execução principal. Isso causou dois grandes problemas:

A rolagem é realizada em uma linha de execução separada e, portanto, envia 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.

Agora apresentamos um novo conjunto de APIs para oferecer suporte a animações de rolagem, que podem ser usadas em CSS ou JavaScript. A API tenta usar o mínimo de recursos de linha de execução principal possível, facilitando a implementação de animações movidas por rolagem e tornando-as muito mais suaves. No momento, a API de animações de rolagem é compatível com os seguintes navegadores:

Compatibilidade com navegadores

Origem

Este artigo compara a nova abordagem com a técnica clássica do JavaScript para mostrar como as animações com rolagem podem ser fáceis e suaves com a nova API.

A API CSS de animações de rolagem versus JavaScript clássico

O exemplo de barra de progresso a seguir foi criado usando técnicas de JavaScript de classe.

Cada vez que o evento scroll acontece, o documento calcula a porcentagem de scrollHeight que o usuário rolou.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

A demonstração a seguir mostra a mesma barra de progresso usando a nova API com CSS.

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

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

O novo recurso CSS Animation-Timeline converte automaticamente uma posição de um intervalo de rolagem em uma porcentagem de progresso e faz o trabalho pesado.

Agora, a parte interessante: digamos que você implementou um cálculo superpesado nas duas versões do site que consumiria a maioria dos recursos da linha de execução principal.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Como você pode imaginar, a versão clássica do JavaScript fica instável e lenta devido à junção de recursos da linha de execução principal. Por outro lado, a versão do CSS não é completamente afetada pelo trabalho pesado de JavaScript e pode responder às interações de rolagem do usuário.

O uso da CPU é completamente diferente no DevTools, conforme mostrado nas capturas de tela a seguir.

Comparação da linha de execução principal.

A demonstração a seguir mostra um aplicativo de animação de rolagem criada pelo CyberAgent (em inglês). Você pode ver que a foto aparece gradualmente enquanto você rola a tela.

Nova API JavaScript de animações com rolagem em comparação com o JavaScript clássico

O benefício da nova API não se limita ao CSS. Também é possível criar animações suaves e suaves usando JavaScript. Confira o exemplo a seguir:

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,
    }),
  }
);

Isso permite criar a mesma animação de barra de progresso mostrada na demonstração anterior de CSS usando apenas JavaScript. A tecnologia subjacente é a mesma da versão CSS. A API tenta usar o menor número possível de recursos da linha de execução principal, tornando as animações muito mais suaves em comparação com a abordagem clássica do JavaScript.

Além disso, essa nova API funciona em conjunto com a API Web Animations (WAAPI) e a API CSS Animations para ativar animações declarativas movidas por rolagem.

Mais demonstrações e recursos

Confira as diferentes implementações de animação de rolagem neste site de demonstração, onde você pode comparar demonstrações usando essas novas APIs do CSS e do JavaScript.

Se você quiser saber mais sobre as novas animações geradas por rolagem, confira este artigo e a palestra do I/O 2023.