How to use Raphael .animateWith()

Question

Has anyone used .animateWith() in Raphael to successfully keep fast animations in sync? It is poorly documented. The library's creator has a video demonstration but no code I can find.

I have a Javascript metronome that consists of a line (the arm of the metronome) and a trapezoidal shaped "weight" that will eventually move up and down to signify tempo. I have a working fiddle here, and the lines in question are:

        var ticktock = Raphael.animation({
            "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }},
            "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}
        }, interval).repeat(repeats / 2);
        arm.animate(ticktock);
        weight.animateWith(arm, ticktock, ticktock);    

If you check out the fiddle and give it a high tempo and about 20 ticks, you should see the weight lag behind the arm. (Please try it a few times if not -- Murphy's Law etc.) I thought this was precisely what animateWith() prevented. Maybe I am using it incorrectly.

If you look at the Raphael source for the .animateWith() function, you see it syncs the .start param of each animation, FWIW.

Answer 1

From the Raphael documentation:

Parameters:

element - [object] element to sync with

anim - [object] animation to sync with

animation - [object] animation object, see Raphael.animation

So I think your code just need to separate the animation and pass that into second parameter for .animateWith():

The animation portion is just:

{
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone },
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone }
} 

So you can do this:

var animationDone = function() { 
    tick(this, repeats, done); 
};

var ticktockAnimationParam = {
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone },
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone }
};
var ticktock = Raphael.animation(ticktockAnimationParam, interval).repeat(repeats / 2);
arm.animate(ticktock);
weight.animateWith(arm, ticktockAnimationParam, ticktock);    

See fiddle: http://jsfiddle.net/wDwsW/7/

Fyi , I moved the callback function outside, instead of using anonymous functions.