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