Animating groups of paths Raphael

Question

I'm new to Raphael and coding in general, so please bear with me as I lumber through this question. I am having trouble animating groups of paths in Raphael. My desired effect is a set of paths running individual animations while moving around the paper in unison. Here is an example:

path1 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
path2 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
path3 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
pathSet = paper.set(path1, path2, path3);
pathSet.animate({transform: "t500,500"}, 1000);

path1.mouseover(function(){path1.animate({transform: "s1.6,r10"}, 1000)});
path2.mouseover(function(){path2.animate({transform: "s1.6,r10"}, 1000)});
path3.mouseover(function(){path3.animate({transform: "s1.6,r10"}, 1000)});

In the above example, the pathSet will animate just like it should, but when I mouse over the individual paths, they don't just scale and rotate in place, but translate back to their original coordinates (where they were prior to the pathSet animation). I read in the docs about the relative "t,r,s" and absolute "T,R,S" parameters for transformations and thought that was it, but they don't seem to make a difference. Any help is much appreciated!

Kevin Nielsen Kevin Nielsen · Accepted Answer · 2012-07-06T17:08:48

You've hit upon what I take to be one of Raphael's biggest weaknesses: transform animations are difficult to combine gracefully!

This won't be a perfect solution, but you can always use the mouseover/mouseout handlers to append/counter the changes you want. For instance:

path1.mouseover(function(){path1.animate({transform: "...s1.5,r10"}, 1000)});
path2.mouseover(function(){path2.animate({transform: "...s1.5,r10"}, 1000)});
path3.mouseover(function(){path3.animate({transform: "...s1.5,r10"}, 1000)});

path1.mouseout(function(){path1.animate({transform: "...s0.66,r-10"}, 1000)});
path2.mouseout(function(){path2.animate({transform: "...s0.66,r-10"}, 1000)});
path3.mouseout(function(){path3.animate({transform: "...s0.66,r-10"}, 1000)});

The append/counter approach will work fine so long as you don't need a stateful reaction from any given element. Once that happens, it seems to me to make more sense to create a wrapper class for a type of object that will keep track of where it should be, adjusting the absolute transform as necessary. But you may not need such a thing.

Animating groups of paths Raphael

1 Answers