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

Designing Motion (The JavaScript Version)

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
November 29, 2011

Designing Motion (The JavaScript Version)

Designing Motion presentation as seen at Pgh.Js() on Nov 29th 2011

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

November 29, 2011
Tweet

Transcript

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

  2. EVENTS! MAKING THINGS! DESIGN!

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

  4. Details Insert cliche here

  5. None
  6. Why Now?

  7. None
  8. None
  9. None
  10. with great comes Responsibility Power Great

  11. None
  12. {...}

  13. Animation for UI

  14. OPEN, CLOSE! BUTTONS, LINKS! BASED ON USER INPUT FADES

  15. None
  16. None
  17. None
  18. Animation for Experience

  19. None
  20. None
  21. None
  22. BREAK IT DOWN

  23. None
  24. None
  25. None
  26. {...}

  27. SO Many Options!

  28. Metaphor What are you imitating?

  29. None
  30. None
  31. None
  32. None
  33. Weight & Physics Light as a feather. Stiff as a

    board.
  34. None
  35. None
  36. The idea that various aspects of the character’s attributes come

    together to just feel “right”. Appeal
  37. “... 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]
  38. Internet != Cartoon

  39. Rules Just For Us :)

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

  41. Yeah I changed my mind

  42. None
  43. None
  44. None
  45. None
  46. Semantics Matter We care about that codestuffs

  47. That’s Mr. DOM respect!

  48. Hi, I’m a link! Hi, I’m a link! Hi, I’m

    a link!
  49. New Things!! yay?

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

  51. None
  52. Limitations work with them, not against them. frenemies?

  53. None
  54. None
  55. Dealing With Multiples

  56. Transference

  57. None
  58. None
  59. Time Signatures

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

  66. Slides & Things: valhead.com Let’s Chat: val@valhead.com • @vlh Thanks!