How to use Raphael .animateWith()

animation, javascript, raphael

Solution

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.

Problem

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.

Original source