Let's Talk about the Web Animations API
This is an introduction to a tutorial series on the Web Animations API coming to browsers. I've updated the series content in June 2016, as Chrome and Firefox have both rolled out major updates (and some small spec changes). If you have thoughts/questions or see that I’ve misinterpreted the spec, please reach out to me on Twitter, @dancwilson.
In Summer 2014, Google announced Material design with a representation in web through Polymer… using a polyfill for the upcoming standard Web Animations API.
I hadn’t heard of this API, but I was intrigued, especially since it talked about a MotionPath effect. That wasn’t implemented yet (you’ll find out what happened in Part 5), but its goal of providing a way to unite the CSS, JS, and SVG ways to animate kept me interested. A year later and Chrome and Firefox have started implementations, the polyfill’s progress is steady, and it’s time to take a look at it in earnest.
But so few people are talking about the WAAPI! My hope is to start a series of posts highlighting the features that are in browsers (and the polyfill) now, exploring why we want this API, and figuring out the nuances. Hopefully we will also get more people discussing, and working with, this API.
What is the Web Animations API?
We’ll start this exploration by figuring out what it is and what it is trying to accomplish.
setIntervalintroduced many developers to animations, but it is imprecise and can lead to stuttering animations.
jQuery.animate()introduced several other developers to animations, but often has performance issues.
In general, we like it when browsers support as much as they can, and they take over the optimizations. Browsers now have
document.querySelector because we saw the value jQuery provided to select DOM elements. So utilities in libraries moved into the browser natively. Ideally, we could pack as much animation control at the browser level. These libraries can then focus on providing newer features, and the cycle can continue.
Let’s solve this by adding something new!
At a former job, we received an email stating that they knew we had too many places to check for company announcements - email, monitors in the office, Yammer, Google Chat, and a intranet/wiki. So to solve the problem they announced… they were adding a blog.
My first thought hearing about the Web Animations API was the same thought I had hearing my company was adding a blog - this will only make things worse. Sure enough, the blog didn’t centralize anything, it just added one more place we had to check for news, and it died out.
This feels different, though. Reviewing a spec (first time I’ve really done it to this extent) shows the attention put into this. It’s not meant to replace existing behaviors (although some browsers are deprecating some it seems…), but instead unite the various ways and allow them even to interact. The syntax is similar to CSS but adds the options of variables, controls, and finish callbacks.
So the Web Animations API is new, and starting to be implemented (currently in Chrome and Firefox) in addition to having a polyfill. Next time we will actually start looking at what it provides developers… with examples!
Check out the rest of this series: