@vlh FOWD London 2015

Motion DesignerThink like a

@vlh FOWD London 2015

Motion DesignerThink like a

#FOWD @vlh

Great UI animation has purpose and style.

How it looks

#FOWD#FOWD @vlh

Our goal is relatable motion

#FOWD#FOWD @vlh

#FOWD#FOWD @vlh

#FOWD @vlh

1: Timing !

#FOWD#FOWD @vlh

Timing: appearing to obey the laws of physics

#FOWD#FOWD @vlh

Timing: establishes mood, emotion, and reaction

#FOWD @vlh

ease linear ease-in ease-out ease-in-out

Timing function keywords

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

#FOWD @vlh

TIME

PROGRE

SSION

#FOWD @vlh

Everything is better with cubic beziers!

ease-in-out

#FOWD#FOWD @vlh

#FOWD#FOWD @vlh

#FOWD @vlh

2: Follow Through

#FOWD#FOWD @vlh

Follow Through: not everything comes to a stop at once

#FOWD#FOWD @vlh

#FOWD#FOWD @vlh

Random Aside: variables for keeping your beziers sane

#FOWD#FOWD @vlh

#FOWD#FOWD @vlh

#FOWD @vlh

3: Secondary Action

#FOWD#FOWD @vlh

Secondary Action: supplemental action, reinforces and adds dimension

#FOWD#FOWD @vlh

#FOWD#FOWD @vlh

#FOWD#FOWD @vlh

#FOWD @vlh

One more thing!

#FOWD @vlh

Speed it up.

#FOWD @vlh

Speed it up!!

#FOWD#FOWD @vlh

How it behaves

#FOWD#FOWD @vlh

0.2 to 0.5 seconds is a good range for UI animations

#FOWD#FOWD @vlh

Ease-outs feel more “responsive”

#FOWD#FOWD @vlh

More complex easing needs more time to be readable

#FOWD @vlh

prototype, prototype, prototype!

Oh, hello better tools!

alltherightmoves.valhead.com

Be inspired!

artofthetitle.com

capptivate.co

#FOWD @vlh

There are crazy fun times ahead!

#FOWD @vlh

Thanks! !

@vlh valhead.com alltherightmoves.valhead.com