In a meanwhile Raphaël 1.5 has been released. What is new and why such a version bump? Here is transcript from git commit:

1.5.0 • fixed IE8 issue with the HTML element named Raphael • fixed precision for arcs in IE • added caching to getPointAtSegmentLength function • added ability to do more than one animation of an element at the same time • added "cubic-bezier()" as an easing method • added new syntax for animation (keyframes) • hsl2rgb now accept h as degree (0..360), s and b as % (0..100) • show="new" instead of target="blank" for SVG • added angle method • added snapTo method • cached popup || activeX for IE • fixed insertAfter • fixed timeouts for animation • added customAttributes

Lets take a look at most important updates: custom attributes and keyframes. Custom attribute could be created like this:

paper.customAttributes.segment = function (x, y, r, a1, a2) { var flag = (a2 - a1) > 180, clr = (a2 - a1) / 360; a1 = (a1 % 360) * Math.PI / 180; a2 = (a2 % 360) * Math.PI / 180; return { path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]] }; }

This will create new attribute segment, which you could set up like el.attr({segment: [x, y, r, a1, a2]}); . Basically the function we defined earlier will translate our custom attribute into set of common attributes, in our case segment will become a path. The important thing is that now as an attribute segment could be animated. See demo: growing segments of the pie.

What about keyframes? Well, you can simply specify animation in additional format:

el.animate({ "20%": {cy: 200, easing: ">"}, "40%": {cy: 100}, "60%": {cy: 200}, "80%": {cy: 300, callback: function () {}}, "100%": {cy: 200} }, 5000);

This is more like CSS 3 animation does it. And as a bonus you now can run multiple different animations at the same time over the same element. See demo: asynchronous animation.