Download - CSS

Transcript
Page 1: CSS

THE RABBIT AND THE TORTOISE

the story of how a fable inspired a css animation library

Page 2: CSS

MY NAME’S PI

(my mum calls me sunya)

Page 3: CSS
Page 4: CSS

first, a demo

Page 5: CSS

PHYSICS and UX

Page 6: CSS

Let’s talk about history

Page 7: CSS

ROBERT PENNER

Page 8: CSS
Page 9: CSS
Page 10: CSS

ƒ(Δ∆t, start, stop, duration)

Page 11: CSS
Page 12: CSS

another demo

Page 13: CSS

and that’s how we consider most animations - a series of pre-timed, predetermined sequential/parallel motions

Page 14: CSS

this was picked up by jQuery, Prototype.js, MooTools, Dojo, et al

Page 15: CSS

and there was much rejoicing and revelry to be had

Page 16: CSS

THE END

Page 17: CSS

THE END

except...

Page 18: CSS

Let’s talk about physics

Page 19: CSS

Let’s talk about physics

FAFFERY ALERT

Page 20: CSS
Page 21: CSS

Physics is important, mmkay?

Page 22: CSS

FAMILIARITY AND AFFORDANCE

Page 23: CSS

FAMILIARITY AND AFFORDANCE

skeumorphs, anyone?

Page 24: CSS

A CONTINUOUS STREAM OF INPUTS(eg: gravity)

Page 25: CSS

A CONTINUOUS STREAM OF INPUTS(eg: gravity)

including from the users themselves!

Page 26: CSS

ƒ(Δ∆t, start, stop, duration)

Page 27: CSS

DAMMIT BOB

Page 28: CSS

sidenote: css transitions

Page 29: CSS

Let’s talk about math

Page 30: CSS

“consider time to be a stream”

Page 31: CSS

WORST. ANALOGY. EVER.

“consider time to be a stream”

Page 32: CSS

THE RABBIT AND THE TORTOISE

(finally)

Page 33: CSS

ZENO’S PARADOXES

(look it up. trippy as heck.)

Page 34: CSS
Page 35: CSS

demo

Page 36: CSS

interesting, but is it practical?

Page 37: CSS

Let’s talk about UX

Page 38: CSS

pull out your iPhones

Page 39: CSS

DAMMIT APPLE

Page 40: CSS

DAMMIT GOOGLE

Page 41: CSS

drum roll...

Page 42: CSS

BEAM

https://github.com/threepointone/beam

Page 43: CSS

demos demos demos

Page 44: CSS

CAVEATS!

Page 45: CSS

and.... done! questions?

Page 46: CSS

DHANYAWADAGALU