In this month’s Web Designer we take a look at something desperately lacking on the web - smooth performance with animations.
The browser is in charge of doing so much. It’s got to fetch the page and all the assets involved. For images it’s got to decode and figure out how to render them and the JavaScript needs parsing and working out what might change on the page as a result.
On top of that, the CSS can change how it all looks in an instant. To make sure it’s working at its best, the browser needs to pick up what’s showing, what isn’t, where, how and indeed when.
All of that means it’s very easy to get animations wrong. Thankfully, there’s plenty of ways to do it right.
In the past few years, there has been great focus on creating CSS animations that use the full force of the device to make everything nice and smooth. More recently that power has been leant over to the Web Animations API in JavaScript to get that same behaviour in a more declarative way.
This tutorial goes through making up a simple ticket buying site, making a nice slide-in navigation and an “add to basket” animation powered by the latest JavaScript animation techniques.
So why not pick up a copy and see how you can improve the animations on your site? I’m sure there’s something you can find in there that you can put to good use immediately.