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

Designing Motion with CSS3 and JavaScript

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
April 30, 2012

Designing Motion with CSS3 and JavaScript

Making awesome animations with web standards and how CSS transitions can come in handy. As seen at FITC Toronto 2012

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

April 30, 2012
Tweet

Transcript

  1. Designing Motion Make Animation On The Web Extra Awesome!

  2. I CSS

  3. Content Layer Style Layer Behaviour Layer

  4. Content Presentation Behaviour Experience

  5. These changing times

  6. None
  7. None
  8. None
  9. Experience is now the material, not ceramic or plastic. “

    ” Liz Danzico, SVA
  10. None
  11. None
  12. Transformitionamations

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. ease linear ease-in ease-out ease-in-out

  20. ease linear ease-in ease-out ease-in-out cubic-bezier

  21. None
  22. A B

  23. {...}

  24. None
  25. Animation for UI

  26. None
  27. None
  28. Animation for storytelling

  29. None
  30. None
  31. Metaphor What are you imitating?

  32. None
  33. None
  34. None
  35. None
  36. None
  37. Weight & Physics Light as a feather. Stiff as a

    board.
  38. None
  39. None
  40. Transference

  41. None
  42. None
  43. The idea that various aspects of the character’s attributes come

    together to just feel “right”. Appeal
  44. None
  45. “... it’s easy to forget that when you’re building a

    game you’re not just building a set of rules or a pile of content. You’re crafting and experience... Animation happens to be my weapon of choice to achieve this” [Mika Mobile blog post]
  46. Internet != Cartoon

  47. Are we there yet? “Point B” isn’t static.

  48. None
  49. None
  50. None
  51. None
  52. Semantics Matter We care about that codestuffs

  53. The DOM

  54. New Things!! yay?

  55. Fallbacks+ browsers, devices, the future, oh my!

  56. None
  57. None
  58. Multiples & Workflow

  59. Content Layer Style Layer Behaviour Layer

  60. Limitations think of them as your friend. for real.

  61. None
  62. None
  63. None
  64. None
  65. Go Play! Experiment. Make things. Have fun.

  66. Files & Slides: valhead.com Let’s Chat: val@valhead.com • @vlh