Just like the render pipeline — a carousel goes round at blazing speeds, produces stunning visuals, and may cause motion sickness if you are not careful.

Web Animation and the Render Pipeline

Daniel Ström
Oct 25, 2018 · 7 min read

The Render Pipeline

The five steps of the render pipeline: Script, Styles, Layout, Paint and Composite

Step 1: Script

The necessary elements of a spinner component is created and assigned classnames.

Avoid heavy computations

Maybe you can make sure the collection of posts are pre-sorted on the server.

Offload heavy computations

Any long-running calculations that can not be avoided should be performed in a separate thread using Service Workers to avoid slowing down rendering.

Avoid unnecessary DOM modifications

Using a shadow DOM can help minimize the necessary changes.

Prefer CSS Animations

Their updates are automatically run in a separate thread. Next up in preference should be the Web Animation API and lastly reserve animating with regular javascript as a last resort (if at all).

Avoid blocking javascript

When doing api calls or reading files from disk, make sure to use callbacks or promises rather than synchronous functions.

Use requestAnimationFrame

To limit frequent updates to a reasonable rate for the given device.

Step 2: Styles

Some styles are applied to the body and other elements.

Minimize the number of selectors

Remove styles that are not relevant to the current page.

Avoid universal selectors

Selectors like * or [type="url"] has to be checked for all elements which can add up to a hefty performance cost.

Avoid the descendant selector

With a selector like .article p, all parents of each p tag has to be checked in order to determine if it matches. Use shallow selectors, like .article > p, whenever possible.

Use classes

While a rule like li:nth-child(odd) has a certain elegance, from a performance standpoint it would make more sense to just add a class .odd-row to all odd rows.

Step 3: Layout

The elements of our spinner are laid out on the page and given dimensions.
The spinner elements as the browser knows them during the layout phase.

Step 4: Paint

Colors are assigned to the individual balls and each is promoted to a separate layer.
In the Chrome Dev Tools’ layer panel, we can confirm the balls are on separate layers.

Step 5: Composite

We’re using transform to create a rotating animation — taking advantage of GPU-acceleration.

Putting it all together

Assigning the spin animation is the last step necessary to complete our spinner. We also add some animation delay for each ball to make the overall motion more interesting.
Our completed, highly performant, spinner — in all its glory.

Further reading

The venerable Nielsen Norman Group has compiled a lot of interesting data on how to use animation to support the user experience.

iZettle Engineering

We build tools to help business grow — this is how we do it.

Daniel Ström

Written by

I’m a full stack web developer and UX designer with a passion for all things software

iZettle Engineering

We build tools to help business grow — this is how we do it.