Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate. Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means: - creating custom easings that reinforce branding and physics - choreographing scalable timing values - creating a vocabulary of reusable components - combining those components into unique yet universal animation patterns. Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel.

1. with @RachelNaborswith @RachelNabors
Communicating Animation

2. devToolsChallenger.com

3. lightningdesignsystem.com/design/
motion

4. Sleek & Professional

5. Carefree and Casual

7. Challenges that prevent consistent anima2ons
• Communica2on issues make it hard for teams to
understand and tackle anima3ons
• Inadequate deliverables prevent developers from moving
forward quickly
• Lack of respect and deference to one another leads to
lopsided implementa3ons that favor or disregard different
voices

10. Developers need…
Granular
Components
Instruc3onal
Maintainability
Thema3c
Theory
Educa3onal
Guidance
Designers want…

12. Developers need…
Granular
Components
Instruc3onal
Maintainability
Thema3c
Theory
Educa3onal
Guidance
Designers want…How they compliment each other…
Documenta2on What's there and why
Defaults Building blocks and rules for spinning up new
things
Unity An overlying choreography with language
Guidance Empower future contributors to make decisions

14. Deliverables

19. Easing

20. Accelerationaka ease-inDecelerationaka ease-outBounce

21. glossier.com

22. rachelnabors.com

23. easings.net

24. FireFoxDeveloperEdi.onorChrome

25. You will need curves for…
• Accelera2on ease-out
• Decelera2on ease-in
• Something subtle for fades and color changes
• A bounce (op3onal)

26. Where to use those easings…
• Decelerate (ease-out) human interac3ons
• Accelerate (ease-in) system-ini3ated anima3ons
• Fades and color changes look best with more linear, subtle
curves
• Bounces increase animacy and add an air of “fun.”

27. Timing

28. lightningdesignsystem.com/
resources/tokens/#category-time

29. modularscale.com

30. Timing Limita2ons
• Stay inside 70 to 700 milliseconds
• 200-300ms is a sweet spot
• Shorter dura2ons for fades and color changes
• Longer dura2ons for large movements
• Use milliseconds instead of seconds to prevent decimal
hell fun 3mes

31. Properties

32. What to animate…
• opacity
• transform

33. “The art challenges
the technology, and the
technology inspires the
art.”
–John Lasseter, Pixar

34. Creating an Animation Language

35. lightningdesignsystem.com/design/
motion

37. Keynote’s animation vocabulary

38. Notification/Dismissalslidefadepop

39. Communicating Visually

41. Storyboards

42. StoryboardforFerdinandtheBulltakenatthe
DisneyFamilyHomeMuseum

43. Internal use storyboard for
DevToolsChallenger.com

44. Mystoryboardtemplate
goo.gl/PyBXI7

46. Storyboard Tools
• Go old school with post-its, index cards, huge sheets of
paper
• My precious storyboard template goo.gl/PyBXI7
• boords.com

47. Animatics

48. “An animation is worth a
thousand meetings.”
–@RachelNabors

49. SpaceUnicornanima.cusedwithpermission
ofBrianneDrouhardaka@potatofarmgirl

50. loadingspinnerideafromlunch

51. Animatics are NOT deliverables.

52. Anima2c Tools
• Keynote
• Adobe ARerEffects
• Principle app
• Stop Mo3on app

53. Prototypes

54. “What developer doesn’t
want a good copy-
paste?”
–Stephanie Rewis, Salesforce

56. invisionapp.com

57. principleformac.com

58. framerjs.com

59. webflow.com

60. Prototyping Tools
• Na2ve-oriented Principle, Pixate
• Web-oriented Invision, UX Pin
• Code required Founda3on, Framer.js

63. Prioritizing Animation

64. the beau/fully shaded
penny phenomenon

70. Collabora2ons
• On new projects anima3on issues and ideas must be
addressed during feature development.
• On exis2ng projects the feature’s team should be
entreated to join the conversa3on.
• Don’t tack anima3on on alone and/or aRer the fact. You
will have a bad 3me.

73. Generating Buy In

74. Group documentation

76. Cultivate and champion

77. Team up.

78. There is no right way.

83. There is no right way.There is only your way.
WebAnimationWeekly.com
slack.AnimationAtWork.com
@RachelNabors
.com