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

To be honest, changing the attributes of 3000 items should be easy for any computer. Raphael uses a setInterval for each animated element. After the element's attribute is changed, the browser re-draws the entire page. This is 2999 un-necessary re-draws.

Here is what I would do: Instead of using the Raphael animation, use a loop to change each element. It is a little more complex, but it is faster. In addition, you can change the steps per second. If your animation is running too slow, just reduce the steps per second.

Here is an example: http://jsfiddle.net/dqJps/25/

Hope this helps.