1. Hello

2. Benjy Stanton
(@benjystanton)

3. by
Mayoral
Appointment

4. About Me

5. Mario Paint
© Nintendo

6. “The Nativity”
by Benjy Stanton

10. Designer by Day

11. Crafting
Animation
on the Web

12. F***h

13. Animation is Immature

14. Animation as a
Design Material

15. “The addition of movement to a
[web] experience can provide clarity,
information about context and,
frankly, a dash of joy and fun.”
Rachel Hinman

16. Clean and Simple

17. The Time is Right

18. Animation
Principles

19. “Animation is the rapid
display of a sequence of
images to create an
illusion of movement.”

20. “...a bestowing of life.”

23. Timing and Spacing

24. Easing

25. Ease Out

26. Ease In

27. Anticipation
and Reaction

28. 1. Tell them what you’re going to do.
2. Do it.
3. Tell them that you’ve done it.

29. Testing

30. Animade
Lernz

32. www.animade.tv

33. CSS3 Animation

34. @Keyframes Rule
and
Animation Property

35. 0%
25%
50%
75%
100%
{ color: crimson; }
{ color: sandybrown; }
{ color: gold; }
{ color: lawngreen; }
{ color: steelblue; }

36. name:
duration:
timing-function:
delay:
iteration-count:
direction:

37. name:
duration:
timing-function:
delay:
iteration-count:
direction:

38. matthewlein.com/ceaser/
or
cubic-bezier.com

40. “Easing is one of those
things that web designers
don’t talk about enough.”
Val Head

41. timing-function: steps(10);

42. © Nintendo

43. © Nintendo

44. 24ways.org/
2012/flashless-animation/
by Rachel Nabors

45. minimalmonkey.com

47. Workflow

48. Animation Identity

49. Credit: Steve Karg

50. Notes

51. Show and Tell

52. Act!

53. Storyboard

54. Animatics
(Moving Storyboards)

55. Keynote
Photoshop
Edge Animate
After Effects

56. After Effects

58. Conclusion

59. Think of animation as
a design material, not
a piece of content.

60. Use it to communicate
more, without adding
clutter to your designs.

61. Use animation to
give each project a
unique personality.

62. Animation is
distracting, be mindful
of people’s attention.

63. Further Reading

64. Transitional Interfaces
by Pasquale D’Silva
(on Medium)

65. A New Mobile
UX Design Material
by Rachel Hinman
(on Smashing Magazine)

66. Flashless Animation
by Rachel Nabors
(on 24 Ways)

67. Better Navigation
Through Proprioception
by Cennydd Bowles
(on A List Apart)

68. The Animator’s Survival Kit
by Richard Williams
(on good ol’ fashioned paper)

69. Thank You