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

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

@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

Smashing Conf Freiburg 2019

By vlh

Smashing Conf Freiburg 2019

  • 77
Loading comments...