Animation with requestAnimationFrame

by de Montalembert Jonathan

HTML

<div class="anima">lol</div>

CSS

.anima {
  background: tomato;
  padding: 20px;
  width: 100px;
  text-align: center;
}

JavaScript

var start = null;
var previous = null;
var distance = 500;

function animate(timestamp) {
  // default is 60 fps
  var elem = document.getElementsByClassName('anima')[0];
  if (!start) {
    start = timestamp;
  }
  if (!previous) {
    previous = timestamp;
  }

  var pElapsed = (timestamp - start) / 5000;
  elem.style.marginLeft = (distance * pElapsed) > distance ? distance : (distance * pElapsed) + 'px';
  previous = timestamp;

  if (timestamp - start <= 5000) {
    window.requestAnimationFrame(animate);
  } else {
    elem.style.marginLeft = distance + 'px';
  }


}
window.requestAnimationFrame(animate);