How to make smooth animations? How to analyze performance? How to optimize performance? Here are some tips inspired by Freddy Harris' presentation at the best of web 2016.

Today the web wants to compete with applications. To do this we develop one page applications. The difficulty is to optimize these animated interfaces to make the user experience as good as possible.
How to make smooth animations? How to analyze performance?

The layout

The browser calculates the layout and determines the position and size of the “boxes” according to the interaction they have between them (parents and siblings.)
The main css properties used for the layout (display) are:

• block layout
• Inline Layout
• Table layout
• Positioned Layout
• Flexible Box Layout
• Grid Layout

The paint

After calculating the positions, the browser applies the visual styles.
The main css properties used for paint are:

• background,
• color
• box-shadow
• border color
• ...

The Composite

All bitmap elements (images, videos, canvas) are sent to the GPU (graphics processor).
The GPU applies texture operations such as transformations or transparency. Certain elements and operations such as 3D transformation, video and canvas, css animation, transparency, css filters, etc. lead to the creation of layers which will be flattened by the GPU to obtain the rendering of the page.
To optimize the composite developers sometimes use a translateZ(0) css hack. This hack is strongly discouraged and it is recommended to use the css will-change property. This property tells the browser which element will change and which properties will change.

CSS animations

Optimizing the animations makes it possible to achieve a smooth animation at 60 fps, i.e. approximately 16.6ms between each image.
[youtube https://www.youtube.com/watch?v=pfiHFqnPLZ4&w=560&h=315] Let's take a simple example of animating a square.

A first method consists in animating the margins

#test { width: 160px; height:160px; margin: 15px; transition: margin 1s; } #test.change { margin-top:100px; margin-left:100px; }

To make this animation we get on desktop:

• 16.74ms between each frame
• 59 FPS
• 3.23 ms CPU processing

and on mobile:

• 31.29ms between each frame
• 31 FPS
• 28.90 ms CPU processing

A second method is to animate the square itself.

#test{ width: 160px; height:160px; margin: 15px; transition: transform 1s; } #test.change{ transform: translate(100px, 100px); }

We get on desktop:

• 16.74ms between each frame
• 59 FPS
• 3.23 ms CPU processing

and on mobile:

• 50.66ms between each frame
• 19 FPS
• 29.84 ms CPU processing

Finally, a third method consists of animating the square by adding the will-change property

#test{ width: 160px; height:160px; margin: 15px; transition: transform 1s; will-change: transform; } #test.change{ transform: translate(100px, 100px); }

We obtain :

• 16.58ms between each frame
• 60 FPS
• 0 ms CPU processing

The will-change property tells the browser which properties will change. The browser can thus anticipate it and plan the resources necessary to optimize it.

javascript animations

Web animations can also be designed in javascript. Several methods are possible to optimize these animations.

requestAnimationFrame

During an animation we must use a timer to perform the transformations every n ms. requestAnimationFrame allows you to optimize animations by grouping them in the same frame.
It is called before rendering the animation.

function draw() { requestAnimationFrame(draw); // your animation code } requestAnimationFrame(draw);

The animation is optimized because it is perfectly synchronized. Therefore it will require less resource from the graphics processor.
Debouncing allows several calls to be grouped into one. This function is useful for scroll, mouse and touch event type animations because the events are called very frequently and the event handler is not made to support that many.

Web animation API

This native javascript technique makes it possible to create more complex animations, to control and sequence them as efficiently as CSS animations.

element. animate([ {transform: 'translate(200px, -100%)'}, { transform: 'translate(200px, ' + window.innerHeight + 'px)'} ], { duration: 1500, iterations: 10, delay: 300 });

This type of animation does not require the loading of external scripts, which optimizes the animation.
This article is inspired by the presentation of Freddy Harris during the best of web 2016.

Antoine Duplouy, UX-Scientist @UXRepublic