Pro Yearly is on sale from $80 to $50! »

CSS Animation with GPU

CSS Animation with GPU

Presented at SF Web Performance Meetup, Nov 17, 2016.

https://www.meetup.com/SF-Web-Performance-Group/events/235424858/

A common advice to have a smooth CSS animation is to follow the best practice of using a restrictive set of CSS properties. In this talk, we will dive a bit deeper to understand how our favorite browser's rendering engine utilizes the graphics processing unit (GPU) to perform CSS animation, what we shall do to have the GPU compositing as efficient as possible, and some tools to help debugging and understanding any potential issues. Finally, we will apply what we learn to build a buttery smooth 3-D Cover Flow clone with the power of CSS and JavaScript.

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

November 17, 2016
Tweet

Transcript

  1. CSS Animation with GPU

  2. Translate 3-D!

  3. Best Practices Under the Hood Experiments

  4. Demo ariya.github.io/kinetic

  5. None
  6. User Interface Browser Engine Graphics Stack Rendering Engine JavaScript Engine

    Networking I/O
  7. HTML Parser DOM CSS Parser HTML Style Sheets DOM Tree

    Style Rules Render Tree Render Layout Paint http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
  8. HTMLDocument HTMLBodyElement HTMLParagraphElement RenderRoot RenderBody RenderText • metrics (box model)

    • hit testing <html><body><p>Hello, SF Web Perf!</p></body></html> DOM Tree vs Render Tree
  9. Anti-aliasing

  10. Curve Approximation Polygon

  11. Font Atlas Bye Buffer

  12. When I don’t know what happened, it just bothers me,

    gets under my skin, and I need to write about it. Taylor Swift
  13. Graphics Processing Unit (GPU) Central Processing Unit (CPU)

  14. Optimized for Games

  15. Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔

  16. CSS 3-D (Transformation) http://ariya.github.io/css/spinningcube/

  17. Compositing

  18. None
  19. Layer Compositing Background Foreground

  20. Same foreground layer, Different transformation matrix Layer Compositing

  21. Render Object to Layer

  22. Render Object to Layer 3-D transformation, CSS animation, …

  23. Debugging in Safari $ defaults write com.apple.Safari IncludeInternalDebugMenu 1 https://ariya.io/2013/06/optimizing-css3-for-gpu-compositing

  24. None
  25. https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool

  26. Available Layer Operations Opacity Transformation Filter

  27. Initialize: Texture Upload “Hey, this is good stuff. Keep it

    around as texture #42.” .... ....
  28. Animation Step: Texture Operation “Apply [operation] to texture #42.”

  29. Mechanics of Optimized Animation Completed? STOP Create a layer Apply

    layer operation
  30. Traffic Matters http://calendar.perfplanet.com/2014/hardware-accelerated-css-the-nice-vs-the-naughty/

  31. Terrible Animation Completed? STOP Create a layer Send a layer

    update Another texture upload
  32. Texture Reupload = Bad http://codepen.io/ariya/full/xuwgy translate3d ???

  33. Pablo Picasso

  34. Let’s Cheat: Color Transition http://codepen.io/ariya/full/ofDIh

  35. https://ariya.io/2014/02/tricks-for-gpu-composited-css

  36. Let’s Cheat Again! https://ariya.io/2014/02/tricks-for-gpu-composited-css

  37. None
  38. Steve Jobs, MacWorld 2007

  39. Drag-and-Scroll Technique Intercept browser events Track position + apply CSS

    transform Illusion of scrolling
  40. http://ariya.github.io/kinetic/2/ Momentum Effect Flick List Kinetic Scrolling https://ariya.io/2013/11/javascript-kinetic-scrolling-part-2

  41. Steady touchstart Pressed Manual Scrolling Automatic Scrolling touchend touchmove touchend

    and zero speed timer tick decelerate to zero speed touchstart timer tick touchend and positive speed
  42. time Scroll offset Deceleration

  43. Deceleration time velocity Exponential decay

  44. Model-View Event Handler Kinetic Model View Touch events Scroll offset

  45. Model-View Event Handler Kinetic Model View Touch events CSS transform

  46. Cover Flow Wireframe

  47. No transformation translateX(-110px) translateZ(-150px) rotateY(60deg) translateX(110px) translateZ(-150px) rotateY(-60deg)

  48. Perspective 3-D translateX(-110px) translateX(-110px) translateZ(-150px) translateX(-110px) translateZ(-150px) rotateY(60deg)

  49. https://ariya.io/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect

  50. None
  51. TELL ME … DO YOU EVEN?

  52. Best Practices Under the Hood Experiments

  53. Thank You shapesecurity.com Some artworks are from http://openclipart.org. speakerdeck.com/ariya @ariyahidayat