loop animation javascript code example

Example 1: javascript animation loop

const refreshRate = 1000 / 60;const maxXPosition = 400;let rect = document.getElementById('rect1');let speedX = 1;let positionX = 0;function step() {  positionX = positionX + speedX;  if (positionX > maxXPosition || positionX < 0) {    speedX = speedX * (-1);  }  rect.style.left = positionX + 'px';  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

Example 2: javascript animation loop

const refreshRate = 1000 / 60;const maxXPosition = 400;let rect = document.getElementById('rect0');let speedX = 1;let positionX = 0;window.setInterval(() => {  positionX = positionX + speedX;  if (positionX > maxXPosition || positionX < 0) {    speedX = speedX * (-1);  }  rect.style.left = positionX + 'px';}, refreshRate);

Example 3: javascript animation loop

function step() {    // UpdateUI();    window.requestAnimationFrame(step);  }  window.requestAnimationFrame(step);