CSS

1,038 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,038
On SlideShare
0
From Embeds
0
Number of Embeds
384
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. THE RABBIT AND THE TORTOISE the story of how a fable inspired a css animation library
  2. 2. MY NAME’S PI (my mum calls me sunya)
  3. 3. first, a demo
  4. 4. PHYSICS and UX
  5. 5. Let’s talk about history
  6. 6. ROBERT PENNER
  7. 7. ƒ(Δ∆t, start, stop, duration)
  8. 8. another demo
  9. 9. and that’s how we consider most animations a series of pre-timed, predetermined sequential/parallel motions
  10. 10. this was picked up by jQuery, Prototype.js, MooTools, Dojo, et al
  11. 11. and there was much rejoicing and revelry to be had
  12. 12. THE END
  13. 13. THE END except...
  14. 14. Let’s talk about physics
  15. 15. Let’s talk about physics FAFFERY ALERT
  16. 16. Physics is important, mmkay?
  17. 17. FAMILIARITY AND AFFORDANCE
  18. 18. FAMILIARITY AND AFFORDANCE skeumorphs, anyone?
  19. 19. A CONTINUOUS STREAM OF INPUTS (eg: gravity)
  20. 20. A CONTINUOUS STREAM OF INPUTS (eg: gravity) including from the users themselves!
  21. 21. ƒ(Δ∆t, start, stop, duration)
  22. 22. DAMMIT BOB
  23. 23. sidenote: css transitions
  24. 24. Let’s talk about math
  25. 25. “consider time to be a stream”
  26. 26. “consider time to be a stream” WORST. ANALOGY. EVER.
  27. 27. THE RABBIT AND THE TORTOISE (finally)
  28. 28. ZENO’S PARADOXES (look it up. trippy as heck.)
  29. 29. demo
  30. 30. interesting, but is it practical?
  31. 31. Let’s talk about UX
  32. 32. pull out your iPhones
  33. 33. DAMMIT APPLE
  34. 34. DAMMIT GOOGLE
  35. 35. drum roll...
  36. 36. BEAM https://github.com/threepointone/beam
  37. 37. demos demos demos
  38. 38. CAVEATS!
  39. 39. and.... done! questions?
  40. 40. DHANYAWADAGALU

×