Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Super Smooth Animations
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Giacomo "Giko" Zinetti
March 16, 2018
Programming
1
100
Super Smooth Animations
Speech for CSSDay in Faenza (Italy)
March, 16th 2018
Live on
https://cssday2018.slides.giko.it/
Giacomo "Giko" Zinetti
March 16, 2018
Tweet
Share
More Decks by Giacomo "Giko" Zinetti
See All by Giacomo "Giko" Zinetti
Cmd Alt I - Chrome Dev tools
gcmznt
0
76
ES2015 new features
gcmznt
0
54
CSS from the future
gcmznt
0
38
Web performance & Http2
gcmznt
0
59
CSS variables
gcmznt
2
110
CSS Performance
gcmznt
2
82
Other Decks in Programming
See All in Programming
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
170
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.4k
AI時代の認知負荷との向き合い方
optfit
0
160
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
210
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.9k
CSC307 Lecture 09
javiergs
PRO
1
830
Grafana:建立系統全知視角的捷徑
blueswen
0
330
CSC307 Lecture 05
javiergs
PRO
0
500
AI巻き込み型コードレビューのススメ
nealle
1
210
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
3.9k
Featured
See All Featured
Mind Mapping
helmedeiros
PRO
0
81
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
Designing for humans not robots
tammielis
254
26k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
110
Embracing the Ebb and Flow
colly
88
5k
Practical Orchestrator
shlominoach
191
11k
Music & Morning Musume
bryan
47
7.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
170
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
320
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
84
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
Transcript
Super smooth animations
Expectation Expectation
Reality Reality
Battery drain Battery drain
Device Device overheating overheating
Maillard Maillard
Giacomo Zinetti Giacomo Zinetti @gcmznt @gcmznt
How browser How browser renders? renders?
Render Render cycle cycle JavaScript JavaScript Style Style Layout Layout
Paint Paint Composite Composite
Our logic Our logic JavaScript JavaScript Style Style Layout Layout
Paint Paint Composite Composite
margin margin padding padding Reflow Reflow JavaScript JavaScript Style Style
Layout Layout Paint Paint Composite Composite
color color background background Repaint Repaint JavaScript JavaScript Style Style
Layout Layout Paint Paint Composite Composite
transform transform opacity opacity Compose Compose JavaScript JavaScript Style Style
Layout Layout Paint Paint Composite Composite
CSS CSS
Animate Animate compositor-only compositor-only properties properties
Execute long JS task Start heavy JS loop Left Translate
Create layers Create layers will-change will-change
❌ ❌ * { * { will-change: transform; will-change: transform;
} }
Disable hover Disable hover on scroll on scroll
JS JS
Avoid forced Avoid forced synchronous synchronous layout layout
❌ ❌ elements.forEach(el => { elements.forEach(el => { el.querySelector('img').style.width el.querySelector('img').style.width
= `${el.offsetWidth}px`; = `${el.offsetWidth}px`; }) })
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`; }) })
rAF rAF requestAnimationFrame() requestAnimationFrame()
rIC rIC requestIdleCallback() requestIdleCallback()
Split big tasks Split big tasks
Web workers Web workers
TARGET TARGET RAIL RAIL
Response <100ms Response <100ms Animation <16ms Animation <16ms Idle <50ms
Idle <50ms Load <1000ms Load <1000ms
FLIP FLIP by @aerotwist by @aerotwist
First First const first = const first = el.getBoundingClientRect(); el.getBoundingClientRect();
Last Last el.classList.toggle('end'); el.classList.toggle('end'); const last = const last =
el.getBoundingClientRect(); el.getBoundingClientRect();
Invert Invert const invert = const invert = first.height /
last.height; first.height / last.height;
Play Play el.animate([ el.animate([ { transform: `scale(${invert}px)` }, { transform:
`scale(${invert}px)` }, { transform: 'scale(0)' } { transform: 'scale(0)' } ], 300); ], 300);
First First Last Last Invert Invert Play Play
None
Content Content VS VS Animations Animations
Users! Users!
The best animation The best animation is the invisible one
is the invisible one Thank you Thank you
Links Links This slides Codepen examples Feedbacks are welcome! Web
Fundamentals: Performance CSS Triggers FLIP by @aerotwist