<div class="App">
  <h1>JavaScript animation loop</h1>
  <a target="_blank" href="https://stanko.github.io/javascript-animation-loop/">
    Read the blog post
  </a>
  <div class="Example Example--raf">
    <div>1. requestAnimationFrame</div>
    <div class="Example-position"></div>
    <div class="Box"></div>
  </div>

  <div class="Example Example--timeout">
    <div>2. setTimeout (100ms)</div>
    <div class="Example-position"></div>
    <div class="Box"></div>
  </div>

  <div class="Example Example--timeoutDelta">
    <div>3. setTimeout with delta fix (100ms)</div>
    <div class="Example-position"></div>
    <div class="Box"></div>
  </div>
  
  <div class="Example Example--rafDelta">
    <div>4. requestAnimationFrame with delta fix</div>
    <div class="Example-position"></div>
    <div class="Box"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  background: #fdfdfd;
  font-family: Helvetica, Arial, sans-serif;
}

.App {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 20px;
}

h1 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
}

a {
  color: #409ad7;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  display: inline-block;
  
  &:hover {
    border-bottom-color: #409ad7;
  }
}

.Example {
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  padding: 20px;
  margin-bottom: 10px;
}

.Example-position {
  margin-top: 5px;
  color: #409ad7;
}

.Box {
  width: 30px;
  height: 30px;
  background: #34ba9c;
  margin-top: 20px;
  border-radius: 2px;
}

// --- Global

const FRAME_DURATION = 1000 / 60; // 60fps frame duration
const getTime = typeof performance === 'function' ? performance.now : Date.now;
const MAX_POSITION = 150;

// ---- Request animation frame

const boxRaf = document.querySelector('.Example--raf .Box');
const positionElementRaf = document.querySelector('.Example--raf .Example-position');
let positionRaf = 0;

function animateRaf() {
  positionRaf += 1;

  // Reset position
  if (positionRaf > MAX_POSITION) {
    positionRaf = 0;
  }

  // Update position
  boxRaf.style.transform = `translateX(${ positionRaf }px)`;
  positionElementRaf.innerHTML = `${ positionRaf.toFixed(2) }px`;

  requestAnimationFrame(animateRaf);
}

animateRaf();


// ---- Timeout (100ms)

const boxTimeout = document.querySelector('.Example--timeout .Box');
const positionElementTimeout = document.querySelector('.Example--timeout .Example-position');
let positionTimeout = 0;

function animateTimeout() {
  positionTimeout += 1;

  // Reset position
  if (positionTimeout > MAX_POSITION) {
    positionTimeout -= MAX_POSITION;
  }

  // Update position
  boxTimeout.style.transform = `translateX(${ positionTimeout }px)`;
  positionElementTimeout.innerHTML = `${ positionTimeout.toFixed(2) }px`;

  setTimeout(animateTimeout, 100);
}

animateTimeout();


// ---- Timeout with delta fix (100ms)

const boxTimeoutDelta = document.querySelector('.Example--timeoutDelta .Box');
const positionElementTimeoutDelta = document.querySelector('.Example--timeoutDelta .Example-position');
let positionTimeoutDelta = 0;
let lastTimeoutUpdate = getTime();


function animateTimeoutDelta() {
  const now = getTime();
  const delta = (now - lastTimeoutUpdate) / FRAME_DURATION;

  positionTimeoutDelta += 1 * delta;

  // Reset position
  if (positionTimeoutDelta > MAX_POSITION) {
    positionTimeoutDelta -= MAX_POSITION;
  }

  // Update position
  boxTimeoutDelta.style.transform = `translateX(${ positionTimeoutDelta }px)`;
  positionElementTimeoutDelta.innerHTML = `${ positionTimeoutDelta.toFixed(2) }px`;

  // Update last updated time
  lastTimeoutUpdate = now;

  setTimeout(animateTimeoutDelta, 100);
}

animateTimeoutDelta();


// ---- Request animation frame with delta fix

const boxRafDelta = document.querySelector('.Example--rafDelta .Box');
const positionElementRafDelta = document.querySelector('.Example--rafDelta .Example-position');
let positionRafDelta = 0;
let lastRafUpdate = getTime();

function animateRafDelta() {
  const now = getTime();
  const delta = (now - lastRafUpdate) / FRAME_DURATION;

  positionRafDelta += 1 * delta;

  // Reset position
  if (positionRafDelta > MAX_POSITION) {
    positionRafDelta -= MAX_POSITION;
  }

  // Update position
  boxRafDelta.style.transform = `translateX(${ positionRafDelta }px)`;
  positionElementRafDelta.innerHTML = `${ positionRafDelta.toFixed(2) }px`;

  // Update last updated time
  lastRafUpdate = now;

  requestAnimationFrame(animateRafDelta);
}

animateRafDelta();