animating paths with raphael

Question

I'm still trying to figure out Raphael and am stuck with some basic animation. have a look here: http://jsfiddle.net/d7d3Z/

it's simple enough: two paths that animate into place. What I want though is for it to appear to 'draw' this like a single line, rather than both starting together.

How can I order the animations?

Answer 1

You can call the second animation after the first one is over.

window.onload = function() {
    var c= Raphael("canvas", 200, 200);
    var p = c.path("M140 100");
    var r = c.path("M190 60");

    p.animate({path:"M140 100 L190 60"}, 2000, function() {
        r.animate({path:"M190 60 L 210 90"}, 2000);
    });


};

http://jsfiddle.net/d7d3Z/1/

Answer 2

Use a callback for animate: http://jsfiddle.net/pPwRP/

What this will give you is that it will execute the callback after the first animation has finished.

---

For the lazy to click - here is the code

window.onload = function() {
    var c= Raphael("canvas", 200, 200);
    var p = c.path("M140 100");
    var r = c.path("M190 60");

    p.animate({path:"M140 100 L190 60"}, 2000, function () {
        r.animate({path:"M190 60 L 210 90"}, 2000);
    });
};