Animation at Work: September 2018 Edition
This is a repost of the September 2018 Edition of the Animation at Work newsletter where I was Guest Editor.
I love exploring the next level of tools we have available to build interactive animations on the web. With Chrome, Firefox, Safari, and Edge giving us early access to their Canary, Nightly, Technology Preview, and Insider Preview versions respectively, we can start exploring features that are on the path to stable browsers. Often we get to see how the standards even evolve as they start iterating on implementations.
Here are some of the _ new things in browsers _ that I’m most excited about, centered around web APIs, CSS Houdini, and Canvas.
Web Animations API
The Web Animations API (WAAPI) is coming to WebKit/Safari, and it’s further along than you might realize.
Safari will join the existing WAAPI implementations in Firefox and Blink browsers, so if you haven’t already, it might be time to start exploring it. For the best starting point, check out the guide on MDN from Rachel Nabors.
If you want to dive into some of the future features (already in Firefox Nightly), you can explore how the WAAPI will let you smoothly modify already running animations.
Houdini & Custom Properties
Vincent De Oliveira’s ever-growing Houdini playground is here to introduce you to many different facets of CSS Houdini. You can learn the basics (and the more-than-basics) around its different specs/APIs.
CSS Houdini allows us to build on the power of Custom Properties (CSS Variables) by letting us animate them directly inside keyframes, as shown by Ana Tudor animating gradients and transform functions individually.
There are more people exploring the possibilities of animating Custom Properties in this collection of demos on CodePen.
Variable Fonts
Even fonts are getting into the animation game in new ways with Variable Fonts as Mandy Michael demonstrates in her impressive experiments.
Workers and Worklets
For Canvas drawing, we have a new OffscreenCanvas option to offload work to a worker and keep our main browser thread free for other logic/interactions. And it pairs nicely with progressive enhancement and feature detection while it makes its way into more browsers.
Speaking of sending work away from the main thread, have you seen that Houdini is introducing an Animation Worklet, and it includes initial implementation discussion points around scroll-based timelines?