how a fable inspired a css animation library

1. THE RABBIT AND THE TORTOISE
the story of how a fable inspired a css animation library

2. MY NAME’S PI
(my mum calls me sunya)

7. first, a demo

8. PHYSICS and UX

9. Let’s talk about history

10. ROBERT PENNER

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

15. another demo

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

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

18. and there was much rejoicing and revelry to be had

19. THE END

20. THE END
except...

21. Let’s talk about physics

22. Let’s talk about physics
FAFFERY ALERT

24. Physics is important, mmkay?

25. FAMILIARITY AND AFFORDANCE

26. FAMILIARITY AND AFFORDANCE
skeumorphs, anyone?

27. A CONTINUOUS STREAM OF INPUTS
(eg: gravity)

28. A CONTINUOUS STREAM OF INPUTS
(eg: gravity)
including from the users themselves!

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

30. DAMMIT BOB

31. sidenote: css transitions

32. Let’s talk about math

33. “consider time to be a stream”

34. WORST. ANALOGY. EVER.
“consider time to be a stream”

35. THE RABBIT AND THE TORTOISE
(finally)

36. ZENO’S PARADOXES
(look it up. trippy as heck.)

38. Δ∆x = (target - current)*fraction

39. demo

40. interesting, but is it practical?

41. Let’s talk about UX

42. pull out your iPhones

43. DAMMIT APPLE

44. DAMMIT GOOGLE

45. drum roll...

46. BEAM
https://github.com/threepointone/beam

47. demos demos demos

48. CAVEATS!

49. and.... done!
questions?

50. DHANYAWADAGALU