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.
To give you a quick overview:
A quick win for optimising CSS animations is simply to animate the right properties.
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 describes four steps or stages that take place during the rendering of HTML elements by a web browser.
The four stages are as follows:
transformwhich, 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.
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.
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 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.
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:
transformto modify the element making it appear to be in its initial (First) position.
transformproperty on the element to
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.
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: