Animation loop

animationLoop.js

function animate({ timing, duration, draw }){
  return new Promise((resolve, reject) => {
      const start = performance.now();
      
      function animation(time){
        const progress = Math.min((time-start)/duration, 1);
        const visualProgress = timing ? timing(progress): progress;
        draw(visualProgress);
          
        if(progress < 1) requestAnimationFrame(animation)
        else resolve()
      }
      
      requestAnimationFrame(animation)
  })
}





// USAGE examples
const el = document.getElementsByTagName('div')[0]

const toRight = {
  duration: 1000,
  draw(progress){
    el.style.transform = `translateX(${300*progress}px)`
  }
};
const toLeft = {
  duration: 1000,
  draw(progress){
    el.style.transform = `translateX(${300 - 300*progress}px)`
  }
};

animate(toRight)
  .then(() => animate(toLeft))
  .then(() => animate(toRight))