Purpose and Style Using motion with meaning in interfaces Val Head • @vlh Author of Designing Interface Animation Senior Design Advocate, Adobe

Designing Interface Animation designinginterfaceanimation.com

What makes good UI animation?

! Purpose & Style 💅

Continuity Reinforce mental models of the interface and where things are

Feedback Letting users know something has happened, and helping them keep track of complex tasks.

Directing Attention Leading the eye around an interface in a meaningful way

Choreography Many moving pieces, and “real” expectations

Slow down before stopping Tip: use “ease-out” easing for entrances

Overlap groups of actions Tip: overlapping action (offsets) can also be great for performance!

Similar objects should animate similarly

Entrances should informs exits

Match velocities, not duration

Expressing personality with motion

How we style animation: • Through our easing choices (ease-in, ease-out, ease-in-out, bounce, springs…) • Duration values, offsets • The properties we animate

Aiming for: Calm, Soft, Reassuring Use: opacity, soft blurs, small deltas, easing curves with gradual speed changes

(Some of) The Penner Easing Equations !”#!$%&’%! !”#!()&’%! !”#!$%()&’%! !”#!$%+)”, !”#!()+)”, !”#!$%.)/’0 !”#!().)/’0 !”#!$%().)/’0 !”#!$%+)”- !”#!()+)”- !”#!()+)’% !”#!$%()+)’% !”#!’%1234 !”#!()1234 !”#!$%+)’% See them in action on easings.net !”#!$%()+)”, !”#!$%()+)”-* !”#!$%()*1234

Aiming for: Calm, Soft, Reassuring !”#!$%&’%! !”#!()&’%! !”#!$%()&’%!

Aiming for: Calm, Soft, Reassuring !”#!$%&’”( !”#!)’&’”( !”#!$%)’&’”(

Aiming for: Confident, Stable, Strong Use: Direct movements, straight lines, symmetrical ease-in-outs. Avoid blurs, bounces, and overshoots

Aiming for: Confident, Stable, Strong !”#!$%&’()* !”#!+’,&’()* !”#!$%+’,&’()*

Aiming for: Confident, Stable, Strong !”#!$%&’”() !”#!’)&’”() !”#!$%’)&’”()

Aiming for: Lively, Energetic, Friendly Use: Overshoots, anticipation, “snappy” easing curves.

Aiming for: Lively, Energetic, Friendly !”#!$%&”’( !”#!)+&”’( !”#!$%)+&”’(

Aiming for: Lively, Energetic, Friendly !”#$!%#&’$&()+,-./-.+0-./+*12 !”#$!%#&’$&()+,3-/+,0-+00-/2 !”#$!%#&’$&()+04-+5-+46-/+/52

Aiming for: Playful, Fun, Lighthearted Use: Bounces, shape morphs, squash and stretch

Thank you! Newsletter: uianimationnewsletter.com Let’s chat on twitter: @vlh