web designer to motion designer - generate nyc

@vlh Generate Conf NYC 2015

Motion DesignerWeb Designer

@vlh Generate Conf NYC 2015

Motion DesignerWeb Designer

#generateconf @vlh

Great UI animation has purpose and style.

How it looks

#generateconf @vlh

Our goal is relatable motion

#generateconf @vlh

#generateconf @vlh

#generateconf @vlh

1: Timing !

#generateconf @vlh

Timing: appearing to obey the laws of “physics”

#generateconf @vlh

Timing: establishes mood, emotion, and reaction

#generateconf @vlh

ease

linear

ease-in

ease-out

ease-in-out

Timing function keywords

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

#openvisconf @vlh

TIME

PROGRE

SSION

#generateconf @vlh

Everything is better with cubic beziers!

#generateconf @vlh

ease-in-out

#generateconf @vlh

#generateconf @vlh

#generateconf @vlh

2: Follow Through

#generateconf @vlh

Follow Through: not everything comes to a stop at once

#generateconf @vlh

#generateconf @vlh

Random Aside: variables for keeping your beziers sane

#generateconf @vlh

#generateconf @vlh

#generateconf @vlh

3: Secondary Action

#generateconf @vlh

Secondary Action: supplemental action, reinforces and adds dimension

#generateconf @vlh

#generateconf @vlh

#generateconf @vlh

#generateconf @vlh

One more thing!

#generateconf @vlh

Speed it up.

#generateconf @vlh

Speed it up!!

#generateconf @vlh

How it behaves

#generateconf @vlh

Ease-outs feel more “responsive”

#generateconf @vlh

More complex easing needs more time to be readable

#generateconf @vlh

prototype, prototype, prototype!

Oh, hello better tools!

Be inspired!

artofthetitle.com

capptivate.co

#generateconf @vlh

There are crazy fun times ahead!

valhead.com/generate2015

#generateconf @vlh

Thanks Generate! !

@vlh valhead.com alltherightmoves.valhead.com