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 problemas principais:

• A rolagem é realizada em uma linha de execução separada e, portanto, oferece eventos de rolagem de forma assíncrona.
• As animações da linha de execução principal estão sujeitas a jank.

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

Agora estamos apresentando 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 possível de recursos da linha de execução principal, tornando as animações de rolagem muito mais fáceis de implementar e também muito mais suaves. A API de animações de rolagem é compatível com os seguintes navegadores:

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

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

A barra de progresso de exemplo a seguir é criada usando técnicas de JavaScript de classe.

O documento responde sempre que o evento scroll acontece para calcular 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 em um período de rolagem em uma porcentagem de progresso, fazendo todo o trabalho pesado.

Agora, vamos à parte interessante: digamos que você implementou um cálculo superpesado nas duas versões do site que consumiria a maior parte 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 esperado, 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 CSS não é afetada pelo trabalho pesado do JavaScript e pode responder às interações de rolagem do usuário.

O uso da CPU é completamente diferente nas Ferramentas para desenvolvedores, conforme mostrado nas capturas de tela a seguir.

A demonstração a seguir mostra um aplicativo de animação de rolagem criado pela CyberAgent. Você pode notar que a foto aparece gradualmente à medida que você rola.

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

O benefício da nova API não se limita apenas ao CSS. Também é possível criar animações de rolagem 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 mínimo 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 de rolagem declarativas.

Mais demonstrações e recursos

Você pode conferir as diferentes implementações de animação de rolagem neste site de demonstração, em que é possível comparar demonstrações usando essas novas APIs de CSS e JavaScript.

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