JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<h2>Animating with setInterval</h2>
<div class="set-interval"></div>
<h2>Animating with web animation API</h2>
<div class="animation-api"></div>
<h2>Animating with requestAnimationFrame</h2>
<div class="request-animation-frame"></div>

CSS

body,
* {
  padding: 0;
  margin: 0;
}

h2 {
  padding: 4px;
}

.set-interval,
.animation-api,
.request-animation-frame {
  width: 100px;
  height: 100px;
  margin: 5px;
  position: relative;
}

.set-interval {
  background: red;
}

.animation-api {
  background: blue;
}

.request-animation-frame {
  background: green;
}

JavaScript

//animating with animation API
document.querySelector(".animation-api").animate(
  [{
      transform: "translateX(0)",
      offset: 0
    },
    {
      transform: "translateX(300px)",
      offset: 1
    }
  ], {
    duration: 250,
    easing: "linear",
    iterations: Infinity,
    direction: "alternate",
    fill: "forwards"
  }
);

//animating with setInterval
const div_1 = document.querySelector(".set-interval");
isEnd = false;
let counter = 0;
const distance = 300;
const oneWayTime = 250;
const intervalTime = oneWayTime / distance;
setInterval(function() {
  if (counter >= 0 && !isEnd) {
    counter++;
    div_1.style.transform = `translateX(${counter}px)`;
    if (counter === distance) {
      isEnd = true;
    }
  }
  if (isEnd) {
    counter--;
    div_1.style.transform = `translateX(${counter}px)`;
    if (counter === 0) {
      isEnd = false;
    }
  }
}, intervalTime);


// animating with requestAnimationFrame
let start;
const div_2 = document.querySelector(".request-animation-frame");

function animate(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;
  const position = distance * Math.abs((elapsed + oneWayTime) % (oneWayTime * 2) - oneWayTime) / oneWayTime;
  div_2.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate)
}
animate();