Sunil Pai, UI architect at Myntra talks about CSS and JS at BigRock's httpX 2013 Mumbai

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)

4. first, a demo

5. PHYSICS and UX

6. Let’s talk about history

7. ROBERT PENNER

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

12. another demo

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

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

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

16. THE END

17. THE END
except...

18. Let’s talk about physics

19. Let’s talk about physics
FAFFERY ALERT

21. Physics is important, mmkay?

22. FAMILIARITY AND AFFORDANCE

23. FAMILIARITY AND AFFORDANCE
skeumorphs, anyone?

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

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

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

27. DAMMIT BOB

28. sidenote: css transitions

29. Let’s talk about math

30. “consider time to be a stream”

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

32. THE RABBIT AND THE TORTOISE
(finally)

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

35. demo

36. interesting, but is it practical?

37. Let’s talk about UX

38. pull out your iPhones

39. DAMMIT APPLE

40. DAMMIT GOOGLE

41. drum roll...

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

43. demos demos demos

44. CAVEATS!

45. and.... done!
questions?

46. DHANYAWADAGALU