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