Aggregation of Marginal Gains - Volume #2

Animations On The Web

Make Your Animations Perform Well

On the 16th of March 2018, I went along with the iWeb front-end team on a trip up north to Manchester to go to UpFront Conf where we were treated to a day of technical talks, coffee and free swag.
In the early afternoon, we were presented with a talk titled “Make your animations perform well” which was delivered by Anna Migas. As you can probably tell from the title, the talk was all about web animations; covering the different techniques, issues and considerations to be made on this topic.

Animations: CSS or JavaScript?

There are many solutions for implementing animations on the web. These range from a few lines of CSS to full-blown animation platforms built in JavaScript. As you can imagine, there are many benefits, costs and different use-cases for the variety of implementations.

To give you a quick overview:

CSS

JavaScript

  1. Vanilla JavaScript
  2. Web Animation API
  3. Animation Frameworks

Optimising Animation Performance

A quick win for optimising CSS animations is simply to animate the right properties. transform and opacity are some of the most efficient CSS properties for animation and should be used over other options.

For example, you have an element that you wish to animate in from the left. This effect could be achieved by using relative positioning, margin manipulation and probably dozens of other obscure, hacky methods. However, the translate transformation should take precedence over all of these.

This is a very high-level example, and to delve deeper we will need to understand what is known as the browser’s Critical Rendering Path.

The Critical Rendering Path

The critical rendering path describes four steps or stages that take place during the rendering of HTML elements by a web browser.

The four stages are as follows:

Layers

A layer can be described as one of a series of intermediate representations that is created by a web browser during page rendering. The browser generates layers after a page has already been loaded and parsed.

This is relevant to animation performance because by manipulating how and when layers are created; we can have the browser do any intensive layer work ahead of time, instead of when an animation is triggered.

Layer Creation

We can make a web browser create a layer for a specific element or group of elements. Web browsers will create a new layer for an element when any of the following CSS properties are applied to it:

Will Change

The will-change CSS property provides a way to tell web browsers of about style changes that should be expected to be applied to an element in the future. The browser can then set up optimisations to anticipate changes to the element, doing any necessary work under the hood before it is actually necessary.

FLIP

The FLIP technique, coined by Paul Lewis, stands for First, Last, Invert, Play. Paul’s article contains a much more thorough explanation of the technique, but here is a brief outline of it:

requestAnimationFrame

window.requestAnimationFrame() is a native browser method that requests the browser calls a specific callback function, (passed as an argument), which should update an animation before the next repaint.

This method should be called every time another frame is to be animated. Typically the callback will be called 60 times a second, achieving 60FPS animation, but will generally match the W3C recommendation for the refresh rate of most web browsers.

Testing Animations

Finally, after discussing the different types of animations on the web and how to approach optimising them, we can talk about testing them. Luckily, Chrome is packed with development tools that we can use for testing animations, they include:

 


Subscribe via email

Sign up to get notifications of new posts by email.

Share this article

Posted in Uncategorised

Other posts you might like

Even though its Flash technology is used as a punching bag by web standards fans, Adobe has been working hard…

Conferences allow us to look outwards, to recharge our enthusiasm for the web and to inspire us to continue making…

Remember what the Internet looked like 15 years ago, when eCommerce web site design was in its infancy and social…

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Follow us!

Get the latest eCommerce news, reviews and expert advice in your inbox.

To find out more about how we use your data, read our Privacy Policy