DESIGNING WITH MOTION

Smashing Conf Freiburg

 

DESIGNING WITH MOTION

Val Head
Senior Design Advocate, Adobe
@vlh

💡
Thinking through UI animation

Share the
animation effort
👩🏻‍💻👩🏾‍💻

Look beyond the default easing options

Ease In
Ease Out
Ease In Out
Linear

easings.net

Overshoots & anticipation build energy

Overshoot:

Going past the intended end point

Anticipation:

An opposite movement to call attention to main movement

Overlapping action almost always looks better

Timing, easing, and choreography!

Animating responsibly: prefers reduced motion

Reduce != remove everything

Some animations likely to be triggering, some are not

webkit.org/blog/7551/responsive-design-for-motion/

alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/

@media (prefers-reduced-motion: reduce)  {
    /* alternative behaviour */    
}
let motionQuery = matchMedia('(prefers-reduced-motion)');

const handleReduceMotionChanged = () => {
  if (motionQuery.matches) 
  //alternate behaviour;
}

motionQuery.addListener(handleReduceMotionChanged);
handleReduceMotionChanged();

Thank you!

Newsletter: uianimationnewsletter.com

Twitter: @vlh