Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

MelbCSS – Achieving and maintaining 60 fps

Avatar for James Friend James Friend
February 03, 2016
Programming
0
89

MelbCSS – Achieving and maintaining 60 fps

Given at MelbCSS

I've annotated some of the slides with relevant links in place of the live demos

Avatar for James Friend

James Friend

February 03, 2016
Tweet

More Decks by James Friend

See All by James Friend
React Melbourne - Animating UI
Avatar for James Friend jsdf
0
60
Porting Native code with Emscripten or: Not Reinventing the Wheel in JS
Avatar for James Friend jsdf
0
87

Other Decks in Programming

See All in Programming
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
Avatar for Takashi Kanemoto ttskch
4
870
20251127_ぼっちのための懇親会対策会議
Avatar for kokamoto01 kokamoto01_metaps
2
440
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
Avatar for kazuhiro hara karad
0
110
AtCoder Conference 2025「LLM時代のAHC」
Avatar for Yuki Imajuku imjk
2
490
AWS CDKの推しポイントN選
Avatar for アキキー akihisaikeda
1
240
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
230
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
Avatar for ZOZO Developers zozotech
PRO
9
5.7k
WebRTC と Rust と 8K 60fps
Avatar for tnoho tnoho
2
2k
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
0
160
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
130
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
390
ローターアクトEクラブ アメリカンナイト：川端 柚菜 氏（Japan O.K. ローターアクトEクラブ 会長）:2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
730

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
It's Worth the Effort
Avatar for 3n 3n
187
29k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k

Transcript

  1. Achieving and maintaining 60 fps James Friend

  2. CSS or JS animations? It doesn’t really matter that much

  3. Rebound http://facebook.github.io/rebound-js/examples/

  4. Main things that a browser can animate cheaply: transform: translate

    transform: scales transform: rotate opacity* *sometimes http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

  5. Devtools https://developers.google.com/web/tools/chrome-devtools/profile/evaluate- performance/timeline-tool?hl=en

  6. Used to look like this

  7. Automate it instead https://github.com/axemclion/perfjankie http://calendar.perfplanet.com/2015/using-chrome- traces-to-automate-rendering https://github.com/axemclion/browser-perf

  8. Links to more info https://github.com/jsdf/melbcss-60fps-talk

  9. We’re hiring!