The following demos are not best practice examples, they should just show what you can do with jsMorph.
Most of the demos can be found in the Plugins section as real usable plugins.
A simple demo for a nice loading spinner. It uses less than 1% CPU load. Due to a short distance change (11px) the timer is set automatically to 102.9ms refresh rate (~9.7 fps). By setting speed to 0.05 you could make jsMorph render every 16.5ms (60.6 fps) but you won't recognice a big difference and push CPU load up to 15% and more. Even reducing speed down to 193.8ms refreshing time (5.2 fps) by setting speed to 2 looks quite ok.
See last example in tutorials section for more explanation about the 'green' factor of jsMorph.
You've got a big variety here to change the look and behaviour of the spinner.
var loadSpinner = document.getElementById('loadSpinner'), createSpin = function (obj, num, d, bg) { var newDiv = '', r = (obj.offsetHeight-d)/2; for (var n=num; n--;) newDiv += '<div style="position:absolute;'+ 'left:'+(r*Math.sin(n*2*Math.PI/num)+r)+'px;'+ 'top:'+(r*Math.cos(n*2*Math.PI/num)+r)+'px;'+ 'height:'+d+'px; width:'+d+'px;'+ 'background-color:'+bg+'; border-radius:'+d+'px;'+ 'line-height:0; overflow:hidden;"> </div>'; obj.innerHTML = newDiv; }(loadSpinner, 12, 12, '#91B39F'), circles = loadSpinner.childNodes, cL = circles.length, count = 0, myMorph = new jsMorph(circles, {opacity:0, width:'1px', height: '1px'}, {duration:1000}); window.setInterval(function() {myMorph.start(circles[count++]); if (count >= cL) count=0}, 70);