Tweet
Tweet

Slide 1

Slide 1 text

SILKY SMOOTH ANIMATION WITH CSS WILL BOYD !/lonekorean

Slide 2

Slide 2 text

The opposite of silky smoothness (a bad thing)

Slide 3

Slide 3 text

" 60 frames per second 16.7 ms per frame

Slide 4

Slide 4 text

LOADING RENDERING PAINTING DISPLAYING

Slide 5

Slide 5 text

LOADING RENDERING PAINTING DISPLAYING 
 
 
 Hello World!
 
 




Welcome




Stay a while…




 
 <body> <div> <h1> <p>

Slide 6

Slide 6 text

LOADING RENDERING PAINTING DISPLAYING 
 
 
 Hello World!
 
 




Welcome




Stay a while…




 
 <body> <div> <h1> <p>

Slide 7

Slide 7 text

LOADING RENDERING PAINTING DISPLAYING <body> <div> <h1> <p> • Create the DOM (document object model) • Tree representation of all elements in the document

Slide 8

Slide 8 text

RENDERING PAINTING DISPLAYING <body> <div> <h1> <p>

Slide 9

Slide 9 text

RENDERING PAINTING DISPLAYING <body> <div> <h1> <p> • match style rules to elements • calculate animated values Calculate Styles

Slide 10

Slide 10 text

RENDERING PAINTING DISPLAYING <body> <div> <h1> <p>

Slide 11

Slide 11 text

RENDERING PAINTING DISPLAYING

Slide 12

Slide 12 text

RENDERING PAINTING DISPLAYING

Slide 13

Slide 13 text

RENDERING PAINTING DISPLAYING

text text

Slide 14

Slide 14 text

RENDERING PAINTING DISPLAYING

text text

Slide 15

Slide 15 text

RENDERING PAINTING DISPLAYING

text text • calculate geometry • width, height, position, etc. Layout

Slide 16

Slide 16 text

RENDERING PAINTING DISPLAYING

text text • calculate geometry • width, height, position, etc. Layout ELEMENT ANOTHER ELEMENT

Slide 17

Slide 17 text

RENDERING PAINTING DISPLAYING

text text • calculate geometry • width, height, position, etc. Layout ELEMENT ANOTHER ELEMENT

Slide 18

Slide 18 text

drawRect()
 drawText() G PAINTING DISPLAYING (draw calls) drawCircle()

Slide 19

Slide 19 text

drawRect()
 drawText() G PAINTING DISPLAYING (rasterization) (draw calls) drawCircle()

Slide 20

Slide 20 text

G PAINTING DISPLAYING RENDERER PROCESS COMPOSITOR THREAD MAIN THREAD RASTER THREADS

Slide 21

Slide 21 text

G DISPLAYING RENDERER PROCESS COMPOSITOR THREAD MAIN THREAD RASTER THREADS GPU PROCESS GPU THREAD

Slide 22

Slide 22 text

SUCCESS!*

Slide 23

Slide 23 text

LOADING RENDERING PAINTING DISPLAYING

Slide 24

Slide 24 text

RENDERING PAINTING DISPLAYING

Slide 25

Slide 25 text

RENDERING PAINTING DISPLAYING

Slide 26

Slide 26 text

RENDERING PAINTING DISPLAYING

Slide 27

Slide 27 text

LESS WORK MORE SMOOTH

Slide 28

Slide 28 text

REFLOWS • caused by changes in geometry • easily causes chain reactions width height
 margin padding
 top bottom
 left right 
 font-size and more... #

Slide 29

Slide 29 text

• forces pixels to be redrawn color background-color
 box-shadow background-position
 border-radius and more... REPAINTS #

Slide 30

Slide 30 text

• no reflows, no repaints • extremely efficient transform filter* opacity GPU ACCELERATED $ *except for blur and drop-shadow

Slide 31

Slide 31 text

DEMO TIME SWIMMING FISH

Slide 32

Slide 32 text

DEMO TIME SWIMMING FISH
::before ::after

Slide 33

Slide 33 text

DEMO TIME SWIMMING FISH .fish {
 animation: swim 8s infinite;
 }
 @keyframes swim {
 0%, 100% { left: -200px; }
 50% { left: 200px; }
 }

Slide 34

Slide 34 text

.fish {
 animation: swim 8s infinite;
 }
 @keyframes swim {
 0%, 100% { transform: translateX(-200px); }
 50% { transform: translateX(200px); }
 } DEMO TIME SWIMMING FISH

Slide 35

Slide 35 text

DEMO TIME FISH PARTY × 1000

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

DEMO TIME ALTERNATIVES

Slide 38

Slide 38 text

DEMO TIME BONUS EFFECTS

Slide 39

Slide 39 text

Everything keeps getting better!

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

animation-workshop.herokuapp.com

Slide 42

Slide 42 text

WILL BOYD !/lonekorean THANKS!