How to sequence animations using snap.svg?

Question

I'm trying to animate several objects in a sequence using http://snapsvg.io/.

I want the first object to move, and once that's complete the second object to move etc.

Instead with the following code everything animates simultaneously.

    var s = Snap("#svg");

    var triangle = s.path("M200 200,L600,500 L200,500 L200,200");

    var triangleClone = triangle.clone();
    triangleClone.animate({'transform' : 'r90,200,200 T400,300'}, 1000);

    var triangleClone2 = triangle.clone();
    triangleClone2.animate({'transform' : 'r180,200,200 T100,700'},1000);

    var triangleClone3 = triangle.clone();
    triangleClone3.animate({'transform' : 'r270,200,200 T-300,400'},1000);

What approach do you need to take to control when things animate? There doesn't seem to be one call back to hook into.

Answer 1

Snap has a callback function after an animation, as per the docs

If you want to sequence several, you could make this a bit easier, and create a function where you just pass it animation arrays (see example at bottom)...

var s = Snap("#svg");

var anim1 = function() { 
    triangleClone.animate({'transform' : 'r90,200,200 T400,300'}, 1000, mina.linear, anim2);
}

var anim2 = function() {
    triangleClone2.animate({'transform' : 'r180,200,200 T100,700'},1000, mina.linear, anim3);
}

var anim3 = function() {
    triangleClone3.animate({'transform' : 'r270,200,200 T-300,400'},1000);
}



var triangle = s.path("M200 200,L600,500 L200,500 L200,200");
var triangleClone = triangle.clone();
var triangleClone2 = triangle.clone();
var triangleClone3 = triangle.clone();

anim1();

jsfiddle

If you were going to do a lot more animations, it could be worth making a frame sequence function, like I did here

Answer 2

Use async.js and look at the series function...

This will run these animations sequentially:

async.series([
    function(callback) {
     whatever.animate({ transform: "s-1,1t0,200" }, 1000, mina.linear, callback);    
    },
    function(callback) {  
     whatever.animate({ transform: "t500,200s-1,1" }, 1000, mina.linear, callback);    
    },
    function(callback) {  
     whatever.animate({ transform: "t500,200s1,1" }, 1000, mina.linear, callback);    
    },
    function(callback) {  
     whatever.animate({ transform: "t0,200s1,1" }, 1000, mina.linear, callback);    
    }
]);