with @RachelNaborswith @RachelNabors

Communicating Animation

devToolsChallenger.com

lightningdesignsystem

.com

/design/

motion

Sleek & Professional

Carefree and Casual

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

Developers need…

Granular

Components

Instruc3onal

Maintainability

Thema3c

Theory

Educa3onal

Guidance

Designers want…

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

Deliverables

Easing

Accelerationaka ease-inDecelerationaka ease-outBounce

glossier.com

rachelnabors.com

easings.net

Fire

Fox

Dev

elop

er E

di.o

n or

Chr

ome

You will need curves for…

• Accelera2on ease-out

• Decelera2on ease-in

• Something subtle for fades and color changes

• A bounce (op3onal)

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.”

Timing

lightningdesignsystem

.com

/resources/tokens/#category-time

modularscale.com

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

Properties

What to animate…

• opacity

• transform

“The art challenges the technology, and the technology inspires the

art.” –John Lasseter, Pixar

Creating an Animation Language

lightningdesignsystem

.com

/design/

motion

Keynote’s animation vocabulary

Notification/Dismissalslidefadepop

Communicating Visually

Storyboards

Stor

yboa

rd fo

r Fer

dina

nd th

e Bu

ll ta

ken

at th

e

Disn

ey Fa

mily

Hom

e M

useu

m

Internal use storyboard for

DevToolsChallenger.com

My s

tory

boar

d te

mpl

ate

goo.gl/PyBXI7

Storyboard Tools

• Go old school with post-its, index cards, huge sheets of paper

• My precious storyboard template goo.gl/PyBXI7

• boords.com

Animatics

“An animation is worth a thousand meetings.”

–@RachelNabors

Spac

e Un

icorn

ani

ma.

c use

d w

ith p

erm

issio

n of

Bria

nne

Dro

uhar

d ak

a @

pota

tofa

rmgi

rl

load

ing

spin

ner i

dea

from

lunc

h

Animatics are NOT deliverables.

Anima2c Tools

• Keynote

• Adobe ARerEffects

• Principle app

• Stop Mo3on app

Prototypes

“What developer doesn’t want a good copy-

paste?”

–Stephanie Rewis, Salesforce

invisionapp.com

principleform

ac.com

fram

erjs.com

webflow

.com

Prototyping Tools

• Na2ve-oriented Principle, Pixate

• Web-oriented Invision, UX Pin

• Code required Founda3on, Framer.js

Prioritizing Animation

the beau/fully shaded penny phenomenon

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.

Generating Buy In

Group documentation

Cultivate and champion

Team up.

There is no right way.

There is no right way.There is only your way.

WebAnimationWeekly.com

slack.AnimationAtWork.com

@RachelNabors .com