Animated paths with raphael

Question

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

simple enough: two paths that come to life on the spot. However, I want him to "draw" this as one line, and not start together.

How to order animation?

Answer 1

You can call the second animation after the first is completed.

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 callback for animate : http://jsfiddle.net/pPwRP/

What this will give you is that it will call back after the completion of the first animation.

---

For a lazy 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); }); };