Question

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");
}

Answer 1

You are expecting the callbacks from animation to work differently than they actually do.

The variable character holds a set of paths. Raphaël does not currently map those to groups that would animate all children at once. What is going on here is that each path is animated seperately. In effect, each such animation is triggering a callback when it is done. That way, for the first animation, chartrnsfrm1, the callback is triggered 20 times. You therefore schedule the second animation, chartrnsfrm2, for the whole character 20 times. By the time you reach chartrnsfrm3, your callback is being triggered 20^3 = 8000 times. Scheduling those animations is what kills your browser.

What I have done is remember the last shape, and only schedule the animation of the whole character if the element that the current callback is being called for (this) is equal to the lastShape.

var lastShape = shape;

//1st animation.. 
var chartrnsfrm = Raphael.animation({
    transform:'...t0,-48'        
},1000,"easeout",function(){
    if (lastShape == this)
        character.animate(chartrnsfrm1.delay(2000))
});
character.animate(chartrnsfrm.delay(2000));

You can see the whole updated fiddle here, it has the fourth animation enabled and all of them run smoothly.