Smoothly animate attribute changes to ~3000 Raphael objects at once

Question

UPDATED QUESTION I\'ve updated this to be a little more succinct..:

In this fiddle: http://jsfiddle.net/pX2Xb/4/ I have some raphael code that draws

Answer 1

As I'm not currently that familiar with Rapael.js, I'd just suggest, in a generic JavaScript manner, that you could maybe create an changeRaphaelPathAttributeEvent, that you'd emit each time you'd like to change the paths, with the attribute changes as arguments to said event. And then attach event handlers to each of the paths that would carry out the attribute change, if that's possible.

That way, you would get around the problem of having a loop access all the paths variables and change the attributes synchronously (which would directly affect the page's responsiveness while processing); the method would have a lower impact on the performance that the user experiences.

Note: This is just a solution to get around the immediate performance hit. Maybe there are other solutions available of minimizing the amount of objects needed to access, that you should also consider (and that I'm not capable of telling you, as I don't know Raphael that well).