Firefox/Gecko unable to animate transform="rotate(…)" in SVG?

Question

In the page I'm working on, when the user clicks on an object, one SVG group rotates out of the way while another rotates in.

The code as it is works just fine in WebKit, but it isn't working at all in Gecko. Here is the block of code that is not being executed by Gecko:

var totStep = dur*2/msrate, step=0;
window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
});

Most of this code is adapted from a function which opens the eye when the page is loaded, and that function works fine in Gecko, which is why this is enigmatic to me.

You can see the page with all of its source code at this page. The problematic function is written in the linked eye.js. The problem occurs when the user clicks on "DJ Docroot" under the "Music" section of the menu, which is accessed by clicking anywhere.

Answer 1

You're missing a second argument to setInterval to specify the interval at which the function should be called. So, for example, the following code works:

window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
},10);

Webkit probably just assumes a default value.

Also, just a suggestion, in the future, it might be easier to spot errors like these if you adopt code conventions that will make your code more legible: http://javascript.crockford.com/code.html

A tool like jslint will help with this.