Mozilla gets <animateMotion>!

Yesterday afternoon, I checked in support for the <animateMotion> SVG element, so that feature is supported in this morning's nightly build!

The <animateMotion> element allows for much more flexibility in SVG animations. Mozilla's nightly builds have supported animation of most SVG attributes and properties for a while now, but <animateMotion> gives authors the added ability to effortlessly animate an element to move along any arbitrary path.

I've written a simple Rocket Demo to give an example of the types of things you can do with this. This demo depicts the sad cartoony story of a rocket that gets hit by an asteroid, loses power to its boosters, and slowly falls into the sun. The demo uses no Javascript at all, and it uses <animateMotion> to define the motion-paths of all of the moving elements. I've tested the demo in Opera, Firefox-nightly, and Chromium nightly -- a few things don't work in Chromium, but it works great in the other two browsers. (Thanks to clker.com for some public-domain SVG clip art that I use in the demo.)

Marek Raida (a wizard of SVG demos, and the author of the "Cavern Fighter" game that I linked to a few posts back) has come up with two excellent <animateMotion> demos as well: "Drawing Animals" and "Catch the Mouse." Both are linked off of hist latest blog post. (Note: He's also got a fancier version of the "Catch the Mouse" demo where the mouse's footprints slowly disappear, but Firefox nightly builds are currently a bit choppy on that version, due to some code we should probably optimize for SMIL animation of CSS properties.)