Silky-smooth animations

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Silky-smooth animations

Browsers need to do work to create your animations. To create silky smooth animations, you need your browsers to do as little work as possible.

Jank

Jank is the name given to jerky animations. It happens when you make the browser do too much work. “Too much” means the browser cannot update in time.

Typically, devices refresh their screens 60 times a second. The rate at which the browser refreshes the screen is called frames per second (fps).

To build animations that are silky smooth, your animations need to be ~60fps (or faster). In other words, the browser needs to update every 16.67 milliseconds (1/60*1000).

60fps and 16.67ms are the two magic numbers you need to remember when creating animations. If you get a frame rate lower than 60fps, jank happens. If the browser refreshes slower than 16.67ms, jank happens.

But how do you make sure jank doesn’t happen?

Preventing Jank

Browsers do four things whenever an animation occurs:

  1. Recalculate style—calculate what has changed
  2. Layout—generate geometry and position of each element
  3. Paint—fill out pixels for each element into layers
  4. Composite—draw layers onto the screen

Changing Layout is expensive (we call this layout thrashing). Changing Paint is less expensive (we call this painting, or simply paint). Changing composite is the least expensive of all.

To reduce Jank, you want to change composite properties (not layout properties, not paint properties) if you can. Composite properties are:

  1. Translate (from the transform property)
  2. Rotate (from the transform property)
  3. Scale (from the transform property)
  4. Opacity

Explaining layout thrashing, paint and composite layers is out of scope for this course. For more information you will want to read high performance animations. You’ll also find examples of layout and paint properties in the article.

Measuring Performance

You can measure the performance of your animations with Developer Tools. This article shows you how to measure performance.