Motion from zero: reduced motion sets the duration to zero

A reader can ask the operating system to reduce motion. Your animation should listen. The useful version of "less motion" for a short move is no duration: the element is at the end state immediately. It still ends in the right place. It does not travel.

Reduced motion keeps the end and drops the trip#

prefers-reduced-motion: reduce is a reader setting, not a flourish you may ignore. For a short move, the respectful behavior is a duration of 0: the element is at the end state on the first frame. The information was the end state. The trip was optional. A duration of 0 still works with the easing from the previous lesson, because t reaches 1 immediately and easeOut(1) is 1. You do not need a second path that sets x by hand. Check the media query when the animation starts.

1. allowed320
2. reduced0

function duration(reduce) {
  return reduce ? 0 : 320;
}

console.log(duration(false), duration(true));

320 0

Zero skips the trip#

duration(false) is 320, the normal move from lesson 1. duration(true) is 0. A player that multiplies progress by time will finish on the first frame, because the duration is used up at once. easeOut still returns 1 at t of 1. You do not need a second code path that sets the final x by hand, as long as the player honors a zero duration.

In a browser, the flag is window.matchMedia("(prefers-reduced-motion: reduce)").matches. Pass that boolean into duration. Check it when the animation is about to start. A listener for the change event lets a reader flip the setting while the page is open.

Do not remove the information#

Reduced motion is about the trip, not about hiding the result. A toast that slides in should still appear. A duration of 0 appears it. Leaving the animation at 320 for everyone ignores a setting the reader already made. The next lesson lines up two steps so the second starts with the numbers the first one ended on.