createLoop.js

function createLoop (callback, delay, duration, animationEnd) {
  let start = null;
  let last = null;
  let endAnimation = null;

  function loop (timestamp) {
    if (!start) {
      start = timestamp;
      last = timestamp;
    };

    const deltaTime = timestamp / last;
    last = timestamp;
    const progress = timestamp - start;

    callback({ timestamp, deltaTime, progress });
    
    if (endAnimation || (duration && duration <= progress)) {
      animationEnd && animationEnd();
      return;
    }
    
    window.requestAnimationFrame(loop);
  }
  
  if (delay) {
    setTimeout(function () {
      window.requestAnimationFrame(loop);
    }, delay);
  } else {
    window.requestAnimationFrame(loop); 
  }
}

// Linear interpolation
function lerp (from, to, n) {
  return (1 - n) * from + n * to;
}

const keyCode = {
  ARROW_LEFT: 37,
  ARROW_RIGHT: 39
};

const VELOCITY = 10;

function moveTheGreen (green) {
  let velocity = 0;
  let left = 0;
 
  window.addEventListener('keydown', function (event) {
    switch (event.keyCode) {
      case keyCode.ARROW_LEFT: {
        velocity = -VELOCITY;
        break;
      }
      case keyCode.ARROW_RIGHT: {
        velocity = VELOCITY;
        break;
      } 
    }
  });
  
  window.addEventListener('keyup', function (event) {
    switch (event.keyCode) {
      case keyCode.ARROW_LEFT: {
        velocity = 0;
        break;
      }
      case keyCode.ARROW_RIGHT: {
        velocity = 0;
        break;
      }
    }
  });
  
  function boxMove (deltaTime) {
    left += velocity * deltaTime;
    const deltaLeft = left / (window.innerWidth - green.offsetWidth - 100);
    const color = Math.floor(lerp(50, 255, deltaLeft));
    const rotate = Math.floor(lerp(0, 720, deltaLeft));

    green.style.transform = `translate(${left}px, 0) rotate(${rotate}deg)`;
    green.style.background = `rgb(0, ${color}, 0)`;
  }
   
  return function step ({ deltaTime }) {
    if (velocity) boxMove(deltaTime);
  };
}

function moveTheRed(red, right = 0) {
  let edge = window.innerWidth - red.offsetWidth;

  return function step ({ deltaTime }) { 
    right += deltaTime * right < edge
      ? (edge = window.innerWidth - red.offsetWidth, 10)
      : (edge = 0, -20);

    red.style.transform = `translate(${right}px, 0)`;
  };
}

function moveTheBlue (blue) {
  const magnitude = window.innerWidth / 2 - blue.offsetWidth / 2;
  const translation = magnitude; 
  
  return function step ({ progress, deltaTime }) {
    const x = progress / 1000 * 2;
    const posX = Math.sin(x) * magnitude + translation;
    const posZ = lerp(-1000, 400, Math.cos(x));

    blue.style.transform = `translate3d(${posX}px, 0, ${posZ}px)`;
  };
}

function updateSeconds (box) {
  let count = 0;

  return function step({ progress }) {
    box.innerHTML = (progress / 1000).toFixed(2);
  }
}