Question

I have a Raphael set that I’d like to move by 400px vertically.

When I drew the paths, I applied individual x-axis transformations to all of the paths in the set. When I try to apply the y-axis transformation, I lose my x values. What’s the solution?

sampleIcon = self.paper.path(path).attr({'transform': 't' + (someWidth*index) + ',60' });

iconSet.push(sampleIcon);

// when I click on something
iconSet.animate({transform: 't' + (original x-transform value for each icon) + ',400'}); 

Or is there a way to omit the x-transform entirely?

Answer 1

Raphael’s lack of a comprehensive solution for this issue (bulk animation of arbitrary sets of objects) is one of its most serious limitations in my opinion. If all you need to do is translate items, however (and without using overlapping animations), you’re in luck!

Simply add the “append” modifier to your translation strings, like this:

iconSet.animate({transform: '...t' + (original x-transform value for each icon) + ',400'});

This will effectively “add” the given translation to the currently translated state of each item in the set. You can do the same thing with rotation and scaling, of course.