Motion design principles that actually matter for web animation plus how to create an animation design system with choreography and meaningful documentation.

1. find

5. GreatUI animation has
purpose and style

6. Animating With Style

11. Timing & Spacing
Animation Principle:

12. Timing
The amount of time it takes for an
action to happen. The duration.

14. Timing

15. Spacing
The changes in speed over the
duration of the action’s timing.

16. Spacing

17. Timing & Spacing
Makes animated objects appear to obey the
laws of physics.
Establishes mood, emotion and reaction.

18. Timing = duration
Spacing = easing

19. CSS Easing Keywords
linear ease ease-in
ease-out ease-in-out

20. cubic-bezier(0.42, 0, 0.58, 1);

21. cubic-bezier(x1,y1,x2,y2);

22. (x1, y1)
(x2, y2)

23. cubic-bezier.com

25. Everything
is better with
cubic-beziers

30. Follow Through
Animation Principle:

31. Follow Through
Not everything comes to a stop at once.

32. Follow Through

33. Follow Through
Overshooting the target position.

35. Secondary Action
Animation Principle:

36. Secondary Action
Supplemental action, reinforces
and adds dimension.

38. (live demo - no slides)

39. The Bigger Picture

40. Choreography
Designing all your UI animations
to feel logical and related.

41. Similar objects animate in similar ways

42. Entrance informs exit

43. Match velocities

44. Cohesive over consistent.

45. Consistent

46. Cohesive

48. Expressing Your
Brand In Motion

49. Match design adjectives
to animation styles

51. Design Adjectives
Energetic?
Friendly?
Sleek?
Strong?
Playful?

52. Follow through & anticipation:
Energetic, friendly, bold

53. Squash and stretch:
High energy and playful

54. Ease-in-outs:
Balanced and measured

55. Smaller movements:
Calm and subtle

56. Opacity and blurs:
Soft and stable

57. Animation belongs
in your style guide

58. Document categories of animation
Entrances and exits
Give emphasis
Give feedback
Transitions between states
Personality and brand
Orientation
Storytelling

60. Document your building blocks
Opacity
Scale
Colour
Depth
Position
Rotation

64. Aim to build your
own animation
library

66. Be Inspired!

67. artofthetitle.com

68. capptivate.co

71. @vlh
uianimationewsletter.com