Thursday, April 29, 2010

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 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.)


Cameron McCormack said...

Nice work, Daniel!

Unknown said...

Your work, as well as rocket demo, is very very good ;-)))

Anonymous said...

I gave you a post at

The file I posted shows a bug in Minefield in one of the animate attributeName="display" commands. You can see it if you compare with a WebKit browser side by side.

However the animateMotion works perfectly with all 13 of them in sync.


Daniel said...

@Cameron, Marek: Thanks! :)

@Anonymous/Bruce: I like the Carousel demo, and thanks for the heads up on that bug. I believe the timing on the "display" animations ends up wrong, due to a known issue with keyTimes & calcMode="discrete". It should be fixed once that bug is fixed.

In the meantime, you can work around it by removing the |keyTimes| attribute -- you don't actually need it -- and instead just make the animations on "display" have 2 values instead of 3 (i.e. change "none;inline;inline" to "none;inline", and change "inline;none;none" to "inline;none"). That gives desired results in both Minefield & Opera 10.10, on my machine.

Thanks again for the feedback!