PERFORMANT web ANIMATIONS

Achieving 60FPS

Emily Hayman

  • Awkward
  • Unnatural
  • Janky
  • Slow

WHY?

prevent poor User experience

"Silky smooth" feels fast

  • Frame rate measures a site's responsiveness
  • 60fps is the target for a natural feel
  • =16.7ms to achieve all necessary updates

What?

AIM FOR 60 FRAMES PER SECOND

On initial page load:

  • Download and parse HTML, CSS, JS
  • Evaluate JS
  • Calculate element styles

Let's take a step back.

How is the browser generating pixels from your code?

  • Generate layout of the page from the render tree
  • Where elements are placed is correlated to other elements
  • Re-layouts are expensive

Layout

geometry of the page

  • Calculation of visual styles
  • Re-paint will only occur once per frame - will only re-draw "dirty" elements
  • Re-paints are expensive

PAINT

FIlling in the pixels

  • Separating elements onto compositor layers allows non-destructive changes
  • Only necessary work is to calculate the new position for each layer 
  • GPU is very efficient at basic drawing operations
  • Changes on GPU-composited layers are the least expensive

Composite

generating the layers

  • Transform
  • Opacity
  • Seriously, that's it.

How do i take advantage of this?

only change properties that trigger compositing  

Transform allows:

  • Position (transform: translateX(5px))
  • Scale (transform: scale(2))
  • Rotation (transform: rotate(90deg))
  • Skew (transform: skewX(50deg))
  • Matrix (transform: matrix3d(...))

Get Creative

transform

  • Forcing promotion ensures layer is painted and ready
  • Consider promoting expensive paint elements (position: fixed; overflow: scroll;)
  • Will fix "flickering" or "shimmy"

What else can i do?

manually promote elements to their own compositor layer

  • backface-visibility: hidden;

  • transform: translate3d(0,0,0);
  • "Tricks" the browser into promoting the element

the old way

"tricking" the browser

  • Provides method for informing the browser what types of optimizations will be needed ahead of time 
  • Current support: Chrome + Firefox

The shiny, new method

will-change

  • The browser already does its best to optimize - stronger will-change optimizations are resource heavy

as in all things, moderation

there can be too many composited layers

imperative vs. declarative

how do i best accomplish my goal?

Two methods of creating web animations:

  • CSS (Declarative)
  • Javascript (Imperative)

declarative animations

utilize css

  • Browser can make optimizations - it knows the end point of the operation
  • Missing the expressive power of JS animations; may grow overly complex
  • Generally, the more performant option

Imperative animations

utilize Javascript

  • Runs on the main thread - more likely to result in dropped frames
  • More control - responsive to user input; start/ stop easily
  • Generally, the less performant option

Questions?

Performant Web Animations - Short

By ehayman

Performant Web Animations - Short

  • 1,840