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

Good for simple animations
Native to the web platform
Web browsers are optimised for them
It’s difficult to synchronise in multiples

JavaScript

More control over animation functions and timings
Many different approaches

Vanilla JavaScript
Web Animation API
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:

Styles: The styles stage is where the browser begins calculating the styles that are applied to each DOM element.
Layout: In the layout stage, the browser starts to generate the positioning, shape and size of each element. This is when CSS properties such as width, height and margin are applied.
Paint: Following the layout stage is the paint stage. This is when each element is filled with pixels and layers are created. Some of the CSS properties used in this stage include color, background-color and box-shadow.
Composite: Finally, the composite stage is where the browser starts rendering each layer to the browser window. This is the stage that handles CSS properties such as opacity and transform which, as alluded to earier, are the most optimal properties for use in web animation. This is because in this stage the layers have already been painted which leads to fewer rendering issues and a smoother looking animation.

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:

3D / Perspective Transform
2D Transform
Opacity
CSS Filters

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:

First: The first step is to record the initial (First) dimensions and positioning of the element that will be animated.
Last: Then we want to get the final (Last) dimensions and positioning of the element, after the animation has been executed.
Invert: As the element is now in its final (Last), we use transform to modify the element making it appear to be in its initial (First) position.
Play: Now the element has been inverted, we animate it to its final (Last) position by setting the transform property on the element to none.

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: