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?