(Note: This post was originally part of an issue of the UI Animation Newsletter. Subscribe for weekly updates on web animation and more.)
Earlier this week I was looking for a way to explain Animal Crossing to a coworker who hadn’t heard of it. I’m not sure I explained it well enough, but I did find that the Animal Crossing site has a nice reduced motion option. I was especially happy to come across another real-world example of handling reduced motion well since it’s a big part of what I covered in my most recent An Event Apart talk.
The reduce motion toggle
Here’s how the reduced motion mode works on the Animal Crossing site: There’s a custom toggle present when you first visit the site, and it remembers your selection on your next visit. If you’ve changed your mind, you can toggle the selection again to see the higher motion version, but it starts out with the selection you made on your previous visit.
Hooking into the prefers-reduced-motion query
On top of that, it also respects the prefers-reduced-motion query, so if you’ve selected reduce motion in your OS settings you’ll automatically see reduced motion when you pull up the site.
It’s also interesting to note how the motion used on the site changes when the reduced motion option is selected. The reduced motion mode doesn’t remove all animations from the site wholesale. Instead, it replaces the large animations that are likely to be triggering for anyone with motion sensitivities with safer effects.
What’s reduced?
Their reduced motion mode uses cross fades in place of the spinning motion blur transition effect in the hero space and removes the confetti effects from the character carousel. It also replaces some of the entrance animations with large movements further down the page with opacity fades. The small movements on hover, opacity fades, and colour fade animations are left the same as they were.
Overall, that’s a great approach to providing a way for those with motion sensitivities to participate in the content and use the site in a way that’s safe for them. The same approach is used well on apple.com and viljamisdesign.com too, if you’re looking for more examples.
Learn more about reduced motion
If you want to learn more about when and how to use prefers reduced motion, I did a whole talk on Inclusive Motion at An Event Apart last year that goes into lots of detail on the how to implement reduced motion well and why you might want to use it on your next project. (The prefers-reduced-motion specifics start around the 20 minute mark.)
