Criar animações suaves em uma página web pode ser complicado, especialmente se você não tem certeza de como lidar com o tempo corretamente. A ótima notícia é que a API requestAnimationFrame() facilita.  requestAnimationFrame() é um método que permite agendar a próxima etapa da sua animação antes da próxima repintura da tela, resultando em uma experiência fluida e visualmente atraente. A próxima repintura da tela refere-se ao momento em que o navegador atualiza a exibição visual da página web. Isso acontece várias vezes por segundo, tipicamente cerca de 60 vezes (ou 60 frames por segundo) na maioria dos displays. Para usar o método requestAnimationFrame(), tudo o que você precisa fazer é chamá-lo e passar uma função de callback para ele:

requestAnimationFrame(callback);

Chamar requestAnimationFrame() deve primeiro ocorrer dentro de uma função que gerencia a animação, como animate(), junto com uma função para atualizar a animação, tradicionalmente chamada de update():

function animate() {
 // Update the animation...
 // for example, move an element, change a style, and more.
 update();
 // Request the next frame
 requestAnimationFrame(animate);
}

A função update() é onde a mágica acontece. Dentro dele, você pode alterar o que quiser para animar. Por exemplo, atualizar um estilo ou mudar a posição de um elemento:

function update() {
 element.style.transform = translateX(${position}px);
 position += 2;
}

O que finalmente inicia a animação é chamar requestAnimationFrame() e passar a função animate, desta vez fora da função animate:

requestAnimationFrame(animate);

O loop continuará até você pará-lo. Agora, vamos dar uma olhada em outro exemplo. O HTML para este exemplo é um elemento div com o texto G.E.A.R ACADEMY is Awesome. O CSS transforma o div em um retângulo e oculta qualquer coisa que saia da viewport à esquerda ou à direita. O código JavaScript move o retângulo 2px para a direita a cada chamada de requestAnimationFrame(animate) com a função animate como callback:

<link rel="stylesheet" href="styles.css" />
<div id="rect" class="rect">G.E.A.R ACADEMY is Awesome</div>
<script src="index.js"></script>

body {
  overflow-x: hidden;
}

.rect {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 250px;
  border-radius: 5px;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-size: 2rem;
  position: absolute;
}

const rect = document.getElementById("rect");

let position = 0;

function update() {
  // Move the rectangle 2px to the right
  rect.style.left = position + "px";
  position += 2;

  if (position > window.innerWidth) {
    // Move the rectangle just outside the left side of the screen
    position = -rect.offsetWidth;
  }
}

function animate() {
  update();

  //request the next frame
  requestAnimationFrame(animate);
}

// Start the animation
requestAnimationFrame(animate);

O resultado no navegador será um cartão de título animado flutuando pela tela.