Super smooth animations
Frontenders Ticino - 19 September 2018
Expectation
Reality
Battery drain
Device overheating
Maillard
How browser renders?
JavaScript
Style
Layout
Paint
Composite
Our logic
JavaScript
Style
Layout
Paint
Composite
margin
padding
padding
Reflow
JavaScript
Style
Layout
Paint
Composite
color
background
background
Repaint
JavaScript
Style
Layout
Paint
Composite
transform
opacity
opacity
Compose
JavaScript
Style
Layout
Paint
Composite
CSS
Animate compositor-only properties
Left
Translate
Create layers
will-change
❌
* {
will-change: transform;
}
will-change: transform;
}
Disable hover on scroll
JS
Avoid forced synchronous layout
❌
elements.forEach(el => {
el.querySelector('img').style.width
= `${el.offsetWidth}px`;
})
el.querySelector('img').style.width
= `${el.offsetWidth}px`;
})
🤓
elements.forEach((el, i) => {
ws[i] = el.offsetWidth;
})
elements.forEach((el, i) => {
el.querySelector('img').style.width
= `${ws[i]}px`;
})
ws[i] = el.offsetWidth;
})
elements.forEach((el, i) => {
el.querySelector('img').style.width
= `${ws[i]}px`;
})
rAF
requestAnimationFrame()
rIC
requestIdleCallback()
Split big tasks
Web workers
TARGET
RAIL
Response <100ms
Animation <16ms
Idle <50ms
Load <1000ms
Animation <16ms
Idle <50ms
Load <1000ms
FLIP
by @aerotwist
First
const first =
el.getBoundingClientRect();
el.getBoundingClientRect();
Last
el.classList.toggle('end');
const last =
el.getBoundingClientRect();
const last =
el.getBoundingClientRect();
Invert
const invert =
first.height / last.height;
first.height / last.height;
Play
el.animate([
{ transform: `scaleY(${invert})` },
{ transform: 'scaleY(1)' }
], 300);
{ transform: `scaleY(${invert})` },
{ transform: 'scaleY(1)' }
], 300);
First
Last
Invert
Play
Last
Invert
Play
Content
VS
Animations
Users!
The best animation is the invisible one
Thank you 🙏
Giacomo Zinetti
@gcmznt
Links
Super smooth animations
Frontenders Ticino - 19 September 2018