web designer to motion designer - generate nyc
TRANSCRIPT
@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!
#generateconf @vlh
There are crazy fun times ahead!
#generateconf @vlh
Thanks Generate! !
@vlh valhead.com alltherightmoves.valhead.com