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

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!