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 baseadas em 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.

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

• A rolagem é feita em uma linha de execução separada e, portanto, gera 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 boa performance e sincronizadas 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 possível de recursos da linha de execução principal, facilitando muito a implementação de animações controladas por rolagem, além de torná-las muito mais fluidas. No momento, a API de animações controladas por 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 controladas por rolagem podem ser fáceis e suaves com a nova API.

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

A barra de progresso de exemplo a seguir foi 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ê tenha implementado 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 DevTools, conforme mostrado nas capturas de tela a seguir.

A demonstração a seguir mostra um aplicativo de animação controlada por rolagem criado pela CyberAgent (link em japonês). Você pode ver que a foto aparece gradualmente à medida que você rola a tela.

Nova API JavaScript de animações controladas por rolagem x JavaScript clássico

O benefício da nova API não se limita apenas ao CSS. Também é possível criar animações suaves controladas por rolagem 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 do 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 baseadas em rolagem.

Mais demonstrações e recursos

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

Se quiser saber mais sobre as novas animações baseadas em rolagem, confira este artigo e a conferência do I/O 2023.