Request animation frame

by amindunited

HTML

<div id="thing">
  Thing
</div>

CSS

#thing {
  position: absolute;
  left: 5px;
  top: 5px;
  background-color: #efefef;
  border: solid 1px #999999;
  border-radius: 3px;
  padding: 5px;
}

JavaScript

var time;
var loops = 0;
var thing = document.getElementById('thing');

function draw() {
    if (loops <= 50) {
    	loops++;
    	requestAnimationFrame(draw);
    }
    else {
    	return
    }
    var now = new Date().getTime(),
        dt = now - (time || now);
 
    time = now;
 
    // Drawing code goes here... for example updating an 'x' position:
    thing.style.left = (loops*10)+'px';
}


thing.addEventListener('click', draw);