Raphael Change Direction Animation

Question

I am trying to get a circle to run the following animations:

var paper = Raphael(0, 0, 1280,600);

var circle = paper.circle(100, 100, 20);

circle.animate({
                cx: 200
            }, 2000)

circle.animate({
                cx: 600,
                    cy: 400
            }, 2000)

However I ONLY want the second animation to run AFTER the first one has been completed. Is there a function that can accomplish this easily or do I have to set delays, etc...?

Answer 1

Here is one way: DEMO

var paper = Raphael(0, 0, 1280,600);
var circle = paper.circle(100, 100, 20);

circle.animate({ cx: 200}, 2000, hideCircle);

function hideCircle()
{
    circle.animate({cx: 600,cy: 400}, 2000);
}