Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MelbCSS – Achieving and maintaining 60 fps

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

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
59
Porting Native code with Emscripten or: Not Reinventing the Wheel in JS
Avatar for James Friend jsdf
0
86

Other Decks in Programming

See All in Programming
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
Avatar for Yuichi Maekawa kaelaela
11
6.1k
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
240
What's new in AppKit on macOS 26
Avatar for 1024jp 1024jp
0
120
Android 16KBページサイズ対応をはじめからていねいに
Avatar for mine2424 mine2424
0
150
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
190
GitHub Copilot and GitHub Codespaces Hands-on
Avatar for Kento.Yamada ymd65536
2
150
AI時代のソフトウェア開発を考える（2025/07版） / Agentic Software Engineering Findy 2025-07 Edition
Avatar for Takuto Wada twada
PRO
93
31k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
600
10 Costly Database Performance Mistakes (And How To Fix Them)
Avatar for Andrew Atkinson andyatkinson
0
440
Agentic Coding: The Future of Software Development with Agents
Avatar for Armin Ronacher mitsuhiko
0
110
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
Avatar for kesoji kesoji
0
240

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
KATA
Avatar for Megan Lloyd mclloyd
30
14k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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!