Upload
future-insights
View
429
Download
2
Embed Size (px)
Citation preview
@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