Question

This often-referenced Raphael.js tutorial from 2009 (see “example 6”) animates in jsfiddle with Raphael version 1.5.2 but not with version 2.0. It renders, it just doesn’t animate.

var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);

var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");

tetronimo.attr(
   {
       gradient: '90-#526c7a-#64a0c1',
       stroke: '#3b4449',
       'stroke-width': 10,
       'stroke-linejoin': 'round',
       rotation: -90
   }
);

tetronimo.animate({rotation: 360}, 2000, 'bounce');

http://jsfiddle.net/cdW3u/

Why? There doesn’t appear to be a different “animate” syntax, (although there’s no changelog, so that isn’t perfectly clear.)

Answer 1

The rotation attribute has been replaced with the transform attribute, try this:

tetronimo.animate({'transform':"r360"}, 2000, 'bounce');