Super Smooth Animations

Speech for CSSDay in Faenza (Italy)
March, 16th 2018

Live on https://cssday2018.slides.giko.it/

Transcript

1. Super smooth animations
2. Expectation Expectation
3. Reality Reality
4. Battery drain Battery drain
5. Device Device overheating overheating
6. Maillard Maillard
7. Giacomo Zinetti Giacomo Zinetti @gcmznt @gcmznt
8. How browser How browser renders? renders?
9. Render Render cycle cycle JavaScript JavaScript Style Style Layout Layout Paint Paint Composite Composite
10. Our logic Our logic JavaScript JavaScript Style Style Layout Layout Paint Paint Composite Composite
11. margin margin padding padding Reflow Reflow JavaScript JavaScript Style Style Layout Layout Paint Paint Composite Composite
12. color color background background Repaint Repaint JavaScript JavaScript Style Style Layout Layout Paint Paint Composite Composite
13. transform transform opacity opacity Compose Compose JavaScript JavaScript Style Style Layout Layout Paint Paint Composite Composite
14. CSS CSS
15. Animate Animate compositor-only compositor-only properties properties
16. Execute long JS task Start heavy JS loop Left Translate
17. Create layers Create layers will-change will-change
18. ❌ ❌ * { * { will-change: transform; will-change: transform; } }
19. Disable hover Disable hover on scroll on scroll
20. JS JS
21. Avoid forced Avoid forced synchronous synchronous layout layout
22. ❌ ❌ elements.forEach(el => { elements.forEach(el => { el.querySelector('img').style.width el.querySelector('img').style.width = `${el.offsetWidth}px`; = `${el.offsetWidth}px`; }) })
23. elements.forEach((el, i) => { elements.forEach((el, i) => { ws[i] = el.offsetWidth; ws[i] = el.offsetWidth; }) }) elements.forEach((el, i) => { elements.forEach((el, i) => { el.querySelector('img').style.width el.querySelector('img').style.width = `${ws[i]}px`; = `${ws[i]}px`; }) })
24. rAF rAF requestAnimationFrame() requestAnimationFrame()
25. rIC rIC requestIdleCallback() requestIdleCallback()
26. Split big tasks Split big tasks
27. Web workers Web workers
28. TARGET TARGET RAIL RAIL
29. Response <100ms Response <100ms Animation <16ms Animation <16ms Idle <50ms Idle <50ms Load <1000ms Load <1000ms
30. FLIP FLIP by @aerotwist by @aerotwist
31. First First const first = const first = el.getBoundingClientRect(); el.getBoundingClientRect();
32. Last Last el.classList.toggle('end'); el.classList.toggle('end'); const last = const last = el.getBoundingClientRect(); el.getBoundingClientRect();
33. Invert Invert const invert = const invert = first.height / last.height; first.height / last.height;
34. Play Play el.animate([ el.animate([ { transform: `scale(${invert}px)` }, { transform: `scale(${invert}px)` }, { transform: 'scale(0)' } { transform: 'scale(0)' } ], 300); ], 300);
35. First First Last Last Invert Invert Play Play
37. Content Content VS VS Animations Animations
38. Users! Users!
39. The best animation The best animation is the invisible one is the invisible one Thank you Thank you
40. Links Links This slides Codepen examples Feedbacks are welcome! Web Fundamentals: Performance CSS Triggers FLIP by @aerotwist