Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Amazing UI with CSS and Anima.js

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
March 05, 2013

Amazing UI with CSS and Anima.js

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

March 05, 2013
Tweet

More Decks by fwdays

Other Decks in Programming

Transcript

  1. Amazing UI with CSS and anima.js Yehor Lvivski @lvivski www.lvivski.com

  2. Programmers love their code.

  3. Languages •  Haskell, Scala, Erlang, Clojure •  Java, C#, Objective-C

    •  Ruby, Python, PHP •  Javascript
  4. Patterns MVC 1970s MVVM 2010s ... MV* 2050s

  5. VIEW

  6. VIEW

  7. None
  8. None
  9. None
  10. Xerox PARC 1979

  11. None
  12. 35 years since 1979

  13. None
  14. None
  15. None
  16. None
  17. Javascript + CSS

  18. CSS has everything •  3Dtransforms •  Transitions •  Animations • 

    Events
  19. CSS has limitations

  20. CSS, Bad parts •  Not easy to stop animation once

    started •  You have to deal with percent •  Limited user control
  21. anima.js github.com / lvivski / anima

  22. Stats •  25kB (4kB minified and gziped) •  4 weeks

    of development •  2 week after public release •  ≈600 stargazers
  23. Animation loop

  24. API

  25. API var  world  =  anima.js();   var  world  =  anima.css();

      var  item  =  world.add(   document    .querySelector("div")   );   item.animate(...).css();  
  26. .animate() item.animate({      translate:  [x,  y,  z],    

     duration:  500,      ease:  'ease-­‐in-­‐out-­‐quad',      delay:  100   })  
  27. Method chaining item.animate(...)   .animate(...)   .animate(...)     .infinite()

     
  28. Parallel animations item.animate(  [   {      translate:  [x,

     y,  z],      duration:  500   },  ...   ]  )  
  29. How it works

  30. None
  31. Matrix matrix3d(    1,  0,  0,  0,      0,

     1,  0,  0,        0,  0,  1,  0,        0,  0,  0,  1   )  
  32. Scale & Translate matrix3d(      sX,    0,  

     0,  0,        0,  sY,    0,  0,        0,    0,  sZ,  0,      tX,  tY,  tZ,  1   )  
  33. Rotate matrix3d(      cos(Y)cos(Z),      cos(X)cos(Z)    

     +sin(X)sin(Y)cos(Z),      sin(X)sin(Z)      -­‐cos(X)sin(Y)cos(Z),  0,      ...   )  
  34. Multiply  

  35. None
  36. Decomposition

  37. None
  38. Matrix decomposition •  A×B≠B×A   •  scale×rotate×translate  

  39. Pull Requests

  40. Thanks @lvivski