CSS Animation with GPU

Translate 3-D!

Best Practices Under the Hood Experiments

Demo ariya.github.io/kinetic

User Interface Browser Engine Graphics Stack Rendering Engine JavaScript Engine
Networking I/O

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

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

Anti-aliasing

Curve Approximation Polygon

Font Atlas Bye Buffer

When I don’t know what happened, it just bothers me,
gets under my skin, and I need to write about it. Taylor Swift

Graphics Processing Unit (GPU) Central Processing Unit (CPU)

Optimized for Games

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

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

Compositing

Layer Compositing Background Foreground

Same foreground layer, Different transformation matrix Layer Compositing

Render Object to Layer

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

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

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

Available Layer Operations Opacity Transformation Filter

Initialize: Texture Upload “Hey, this is good stuff. Keep it
around as texture #42.” .... ....

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

Mechanics of Optimized Animation Completed? STOP Create a layer Apply
layer operation

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

Terrible Animation Completed? STOP Create a layer Send a layer
update Another texture upload

Texture Reupload = Bad http://codepen.io/ariya/full/xuwgy translate3d ???

Pablo Picasso

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

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

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

Steve Jobs, MacWorld 2007

Drag-and-Scroll Technique Intercept browser events Track position + apply CSS
transform Illusion of scrolling

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

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

time Scroll offset Deceleration

Deceleration time velocity Exponential decay

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

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

Cover Flow Wireframe

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

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

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

TELL ME … DO YOU EVEN?

Best Practices Under the Hood Experiments

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

CSS Animation with GPU

CSS Animation with GPU

More Decks by Ariya Hidayat

Other Decks in Programming

Featured

Transcript