Animation Performance - Quick Wins

@abinavseelan

blog.campvanilla.com

What makes a website fast? ⚡️

Time to load

What makes a website fast? ⚡️

Time to load

Time to interactivity

What makes a website fast? ⚡️

Time to load

Time to interactivity

Fluid UI

Click

Scroll

Drag

Click

Scroll

Drag

Animations

Buttery 60fps goodness

🥞

But... how do we stay fluid?

🤔

requestAnimationFrame()

requestAnimationFrame()

Built for games and animations

Will always try to run at 60fps, or will throttle down to 30fps under heavy load

function callback() {
    console.log("👋");

    requestAnimationFrame(callback);
}

requestAnimationFrame(callback);

Demo

rAF vs setInterval

Web Workers for heavy computation

🏋️‍♀️

Demo

Move computation to web worker

Under the hood, into the browser

The pixel pipeline

Reflowing

Changes in dimension and geometry

width

height

top

left

margin

padding

bottom

right

😈

Repainting

Pixels need to be redrawn

box-shadow

color

background-color

Most expensive task

👻

GPU Accelerated

No reflows & no repaints!

transform

opacity

😇

Demo

Styles that cause reflows

Styles that cause repaints

http://animation-workshop.herokuapp.com/

https://csstriggers.com/

Layers

.move {
    transform: translateX(10px);

    will-change: transform;
}

Can't we just layer all the things?

Add `will-change` when animating

Remove `will-change` once done

One more thing....

🎁

event listeners

Execute before render

What if you cancel the interaction?

Heavy processing = jank

passive event listeners

document.addEventListener('touchstart', moveObject, {
    passive: true,
});

Demo

Scroll jank - https://rbyers.github.io/scroll-latency.html

That's all folks! 🚀

@abinavseelan

blog.campvanilla.com

Content sourced from these amazing folks

Abinash Mohapatra

Jake Archibald

Will boyd