Designing Motion (The JavaScript Version)

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: [email protected] • @vlh Thanks!