I have this code where I have a made a character using 20 paths and put it into a set.
Now when I animate the set, the first transformation runs smoothly, the second animation stutters, the third animation doesn't happen as it should and the 4th animation kills my pc, the browser hangs and in the task manager I can see that it consumes up to 70% of CPU. How can I avoid this and free the resources so all the animations run smoothly.
*I have to execute 10 simple y-axis transformation animations on that character.
JS Fiddle
window.onload = function(){
var paper = Raphael(0,0,400,400);
var character = paper.set();
paper.setStart();
var attr = {fill:'red',stroke:'none'};
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var shape = paper.rect(100,100,10,20).attr(attr);
var character = paper.setFinish();
character.transform("t0,200")
//1st animation..
var chartrnsfrm = Raphael.animation({
transform:'...t0,-48'
},1000,"easeout",function(){
character.animate(chartrnsfrm1.delay(2000))
});
character.animate(chartrnsfrm.delay(2000));
//2nd animation..
var chartrnsfrm1 = Raphael.animation({
transform:'...t0,-48'
},1000,"easeout",function(){
character.animate(chartrnsfrm2.delay(2000))
});
//3rd animation..
var chartrnsfrm2 = Raphael.animation({
transform:'...t0,-48'
},1000,"easeout",function(){
character.animate(chartrnsfrm3.delay(2000))
});
//4th animation..
var chartrnsfrm3 = Raphael.animation({
transform:'...t0,-48'
},1000,"easeout");
}
