THE RABBIT AND THE TORTOISE

the story of how a fable inspired a css animation library

MY NAME’S PI

(my mum calls me sunya)

first, a demo

PHYSICS and UX

Let’s talk about history

ROBERT PENNER

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

another demo

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

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

and there was much rejoicing and revelry to be had

THE END

THE END

except...

Let’s talk about physics

Let’s talk about physics

FAFFERY ALERT

Physics is important, mmkay?

FAMILIARITY AND AFFORDANCE

FAMILIARITY AND AFFORDANCE

skeumorphs, anyone?

A CONTINUOUS STREAM OF INPUTS(eg: gravity)

A CONTINUOUS STREAM OF INPUTS(eg: gravity)

including from the users themselves!

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

DAMMIT BOB

sidenote: css transitions

Let’s talk about math

“consider time to be a stream”

WORST. ANALOGY. EVER.

“consider time to be a stream”

THE RABBIT AND THE TORTOISE

(finally)

ZENO’S PARADOXES

(look it up. trippy as heck.)

Δ∆x = (target - current)*fraction

demo

interesting, but is it practical?

Let’s talk about UX

pull out your iPhones

DAMMIT APPLE

DAMMIT GOOGLE

drum roll...

BEAM

https://github.com/threepointone/beam

demos demos demos

CAVEATS!

and.... done! questions?

DHANYAWADAGALU