rAF-1

by Nikita Titorovich

HTML

<div id="box"></div>

CSS

#box{
  width: 50px;
  height: 50px;
  background-color: #000;
}

JavaScript

var element = document.getElementById('box');
var startTime;
var duration = 1000; // 1 second or 1000ms
var distance = 60; // 60FPS

var rAFCallback = function( timestamp ){
	startTime = startTime || timestamp; // set startTime is null
  
  var timeElapsedSinceStart = timestamp - startTime;
  var progress = timeElapsedSinceStart / duration;
  
  var safeProgress = Math.min( progress.toFixed(2), 1 ); // 2 decimal points
  
  var newPosition = safeProgress * distance;
  
  element.style.transform = 'translateX('+ newPosition + 'px)';
  
  // we need to progress to reach 100%
  if( safeProgress != 1 ){
  	requestAnimationFrame( rAFCallback );
  }
}

// request animation frame on render
setTimeout(function() {
	requestAnimationFrame( rAFCallback );
}, 2000);