Combining Animations in Raphael

Question

I am animating a SVG "gear/cog" shape infinitely so that it spins endlessly, as follows:

gearAnim = Raphael.animation({ transform: rotation }, duration, 'linear');
which.animate(gearAnim.repeat("Infinity")); // rotate infinitely.

If I want to make the gear pulse (scale transformation) I do the following:

value.animate({
   2: { transform: "s1.2" },
   3: { transform: "s1"} 
}, 600, 'easeOut');

This works. However, the problem is that the scale transformation does not happen with the gear rotation. It stops animating, resets to rotation 0, scales, then jerks back into the previous animation.

Is there a a way of allowing the shape to scale once while also rotating infinitely? Is there something I'm missing here?

Thanks a lot.

Answer 1

Not sure if that's the best way, but one option is to set the callback: http://jsfiddle.net/b9akz/106/

var paper = new Raphael('holder');
var box = paper.rect(100, 100, 30, 30).attr({ stroke: "darkgreen" });
var scale = 2;
var angle = 0;
var func = function(){
    scale = scale > 1.5 ? 1 : 2; 
    angle = angle + 120;
    box.animate(Raphael.animation({ transform: "s" + scale + " r" + angle }, 1000, 'linear', func), 1);
};
func();

There's some artifact in the beginning, though, -- it seems to only start scaling after the first rotation cycle is over.