Raphael SVG animations choppy in some browsers

Question

I have an SVG object that I am adding to my page using Raphael. With roughly 175 paths in 6 sets I suspect it counts as complex.

I am animating each of the 6 sets using the .animate function

function anim(direction, duration){
    return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths 
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000));  // 25 paths

$(window).load(function(){                      
    IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">");  // 32 paths
    IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">");   // 29 paths
    IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}

the problem is that in some browsers, this is very choppy looking.

It's smooth as butter on Mac (tested: FF, Chrome, Safari). It's also lovely on Windows in Chrome, but when I load up windows FF, Safari or IE8 the animations are choppy and a bit stuttering.

It even looks great on a an iPad!

I'd love to be able to make them all look great... so I'm trying to figure out what's costing all the power in FF and Safari (and at the end of the day, hopefully whatever override I manage brings up a fix for IE8 as well).

From the other questions I've seen about choppy animation on Raphael, I see mention of "getting into the guts" to add a timeout to the animate function... (as seen in raphael-min.js)

cz= window.requestAnimationFrame||
    window.webkitRequestAnimationFrame||
    window.mozRequestAnimationFrame||
    window.oRequestAnimationFrame||
    window.msRequestAnimationFrame||
    function(a){setTimeout(a,16)}, /* there is a function here that animates */

Though it looks like in FF for example RequestAnimationFrame gives a smoother performance than setTimeout. (I tested this by deleting the mozRequestAnimationFrame condition and reloading, tried various intervals for the timeout)

Is there something else I might be missing that might help improve the cross browser frame rates of my animations?

Note for example image is at its default 500x500 and the rotation is happening around the image center (point 250x250) however the Image is being displayed on page at 1000x1000 (with viewport doing the scaling at page load.

Is it possible that if I have the designer resize the image to a 1000x1000 canvas and I display at full size from the start that I'll have a boost? Maybe a "smoother ride"? I'm not sure what factors effect SVG animation and performance.

Answer 1

You should look into Element.animateWith (http://raphaeljs.com/reference.html#Element.animateWith). It has a feature that lets you sync one animation with another animation so that everything is updated in lock step. The choppiness can't helped if the browser or device is slow, but syncing animations should make it look better.