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