Designing Motion

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
October 02, 2011

Designing Motion

"With great power comes great responsibility" is something you hear often about making things move on the modern web. Well, if that's the case, then we had better really mean it!

We'll look at how to get the most out of your CSS transitions and transforms by going beyond just start and end points and applying our design eye to those ever important in-between parts. That's where the real power of animation lies. We want elegant and meaningful animation, not obtrusive or meaningless fluff! What can we borrow from traditional animation? And what do we need to make our own rules for? We'll find some answers and (I hope) you'll never think of a simple transition the same again.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

October 02, 2011
Tweet

Transcript

  1. Designing Motion

  2. EVENTS! MAKING THINGS! DESIGN!

  3. Designing Motion

  4. Details Details Details

  5. None
  6. None
  7. None
  8. None
  9. with great POWER comes GREAT responsibility

  10. None
  11. {...}

  12. Animation for UI

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

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

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

  22. {...}

  23. So So Many Options! How do we decide?

  24. What are you imitating? Metaphor

  25. None
  26. None
  27. None
  28. None
  29. Light as a feather Stiff as a board Weight &

    Physics
  30. None
  31. None
  32. The idea that various aspects of the character’s attributes come

    together to just feel “right”. Appeal
  33. “... 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]
  34. The internet is not a cartoon. (usually)

  35. Yeah, I changed my mind…

  36. None
  37. None
  38. None
  39. None
  40. We kinda care about our code…

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

    a link!
  42. YAY! New Things! BOO! New Things!

  43. Transference

  44. None
  45. None
  46. Time Signatures

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. and with that…

  57. THANKS! Files & Slides: valhead.com/WDD2011 Let’s Chat: val@valhead.com • @vlh