際際滷

際際滷Share a Scribd company logo
THE RABBIT AND THE TORTOISE
the story of how a fable inspired a css animation library
MY NAMES PI
(my mum calls me sunya)
the rabbit and the tortoise
the rabbit and the tortoise
the rabbit and the tortoise
the rabbit and the tortoise
first, a demo
PHYSICS and UX
Lets talk about history
ROBERT PENNER
the rabbit and the tortoise
the rabbit and the tortoise
(t, start, stop, duration)
the rabbit and the tortoise
another demo
and thats 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...
Lets talk about physics
Lets talk about physics
FAFFERY ALERT
the rabbit and the tortoise
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
Lets talk about math
consider time to be a stream
WORST. ANALOGY. EVER.
consider time to be a stream
THE RABBIT AND THE TORTOISE
(finally)
ZENOS PARADOXES
(look it up. trippy as heck.)
the rabbit and the tortoise
x = (target - current)*fraction
demo
interesting, but is it practical?
Lets 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

More Related Content

the rabbit and the tortoise