DESIGNING WITH MOTION
Smashing Conf Freiburg
DESIGNING WITH MOTION
Val Head
Senior Design Advocate, Adobe
@vlh
💡
Thinking through UI animation
Share the
animation effort
👩🏻💻👩🏾💻
![](https://s3.amazonaws.com/media-p.slid.es/uploads/248206/images/6518196/Screen_Shot_2019-09-08_at_10.56.51_PM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/248206/images/6518298/bugs.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/248206/images/6519485/Screen_Shot_2019-09-09_at_11.20.54_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/248206/images/6519490/Screen_Shot_2019-09-09_at_11.22.28_AM.png)
@media (prefers-reduced-motion: reduce) {
/* alternative behaviour */
}
let motionQuery = matchMedia('(prefers-reduced-motion)');
const handleReduceMotionChanged = () => {
if (motionQuery.matches)
//alternate behaviour;
}
motionQuery.addListener(handleReduceMotionChanged);
handleReduceMotionChanged();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/248206/images/6519429/Screen_Shot_2019-09-09_at_11.10.05_AM.png)
Thank you!
Newsletter: uianimationnewsletter.com
Twitter: @vlh
Smashing Conf Freiburg 2019
By vlh