Pure JavaScript - Timed Animation - Consistent height? -

i have created script animates height of element in 500ms.

the timer works fine struggling make height increase consistently.

how animate height smoothly within time period? jumps @ moment.

i want replace following smarter:

self.startheight + 5 

i imagine has speed , elapsed time?

https://jsfiddle.net/zrm7xena/1/

(function () {     'use strict';      var animator = {};      animator.endheight = 200; //the end height     animator.interval = null; //create variable hold our interval     animator.speed = 500; //500ms     animator.startheight = 0; //the start height      animator.animate = function (el) {         var self = this,             starttime = date.now(); //get start time          this.interval = setinterval(function () {             var elapsed = date.now() - starttime, //work out elapsed time                 maxheight = self.maxheight; //cache max height               //if elapsed time less speed (500ms)             if (elapsed < self.speed) {                 console.log('still in timeframe');                  //if client height less max height (200px)                 if (el.clientheight < self.endheight) {                     self.startheight = self.startheight + 5; //adjust height                     el.style.height = self.startheight + 'px'; //animate height                 }             } else {                 console.log('stop , clear interval');                 el.style.height = self.endheight + 'px';                 clearinterval(self.interval);             }         }, 16); //60fps     };      animator.animate(document.getelementbyid('box')); }()); 

thanks in advance!

carorus gave great answer below. have updated jsfiddle can see final code working:

https://jsfiddle.net/zrm7xena/8/

typhoon posted great link in relation browser fps:

how determine best "framerate" (setinterval delay) use in javascript animation loop?

i use request animation frame instead of setinterval:

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

cheers all!

the harcoded 5 using height increment doesn't allow animation complete entire final height (200) in time setting (500ms), need calculate height increment based on final height, animation time , interval make consistent:

(function () { 'use strict';  var animator = {};  animator.endheight = 200; //the end height animator.interval = null; //create variable hold our interval animator.speed = 500; //500ms animator.startheight = 0; //the start height animator.interval = 16;  animator.animate = function (el) {     var self = this,     starttime = date.now(); //get start time     //calculating height variation     self.deltaheight = (animator.endheight / animator.speed) * animator.interval;     this.intervalid = setinterval(function () {         var elapsed = date.now() - starttime, //work out elapsed time             maxheight = self.maxheight; //cache max height           //if elapsed time less speed (500ms)         if (elapsed < self.speed) {             console.log('still in timeframe');              //if client height less max height (200px)             if (el.clientheight < self.endheight) {                 self.startheight = self.startheight + self.deltaheight; //adjust height                 el.style.height = self.startheight + 'px'; //animate height             }         } else {             console.log('stop , clear interval');             el.style.height = self.endheight + 'px';             clearinterval(self.intervalid);         }     },  animator.interval); //60fps };  animator.animate(document.getelementbyid('box')); }());