Brian Birtles’ Blog

Over the weekend I had the chance to speak about Web Animations at the HTML5 conference 2013 in Tokyo. I put a fair bit of work into the presentation so I thought I’d put up an English version of the slides (including videos of the demos) in case they’re useful to someone else looking for a gentle introduction to Web Animations.

Last time I introduced timing groups in Web Animations as a simple yet powerful tool for synchronising animations. Great as they are, they open up a few interesting questions. For example, what happens when you pause an animation that’s in a timing group?

Once you start animating anything more than simple fade and slide effects, pretty soon you start wanting to synchronize things. The penguins should start dancing together, the watermelon should explode the moment the blind-folded person hits it, the credits should roll after the movie finishes and so on.

Today we finally shipped the First Public Working Draft of Web Animations!

One of the limitations of CSS and SVG animations is that you can’t do a bouncing effect. That is, you can’t easily do this…

It must be time for my biannual blog post and this time I’d like to introduce a new development in animation for the Web, called, creatively enough, Web Animations.

About a week ago Mozilla Japan put on a two-day event in Tokyo called Mozilla Vision 2012. It was a great weekend with several hundred people coming to talk about what it means to be Open, and, in very Japanese-style, see some cool robots (courtesy of Takahashi Tomotaka-san).

Firefox 4 is going four dimensional! Time dimensional! (Ok, for those who know physics, just pretend 🙂)

There’s CSS transitions for all sorts of animated eye-candy, major JS speed-ups to give scripted animations a boost and mozRequestAnimationFrame to get keep them smooth and in sync, and a whole host of other graphics and video improvements. Oh, and SMIL in SVG!

Our SMIL implementation passed another little milestone yesterday when we landed syncbase timing. We’ve still got a long way to go but this was always going to be the hardest feature for the timing model.

One last post as I race out the door. It appears my attempt to quash the enthusiasm surrounding SMIL doesn’t seem to have worked. It seems like some people are genuinely interested in SMIL and not just for Acid3!