Motion Safe and Motion Reduce Modifiers

Simon Vrachliotis

In a previous tip, we created a text-behind-image effect with a bit of animation that reveals different parts of the image. While this effect looks cool, it can trigger motion sickness in some users. To address this issue, we can stop the animation when the user has enabled the "reduce motion" option in their OS settings.

photo of reduce motion setting on Mac OS

Looking at the code in our example you can see the animation depends on a single class, animate-slowpan


export default function ImageText() {
	return (
		<div className="grid h-screen place-items-center font-paytone-one">
			<div className="animate-slowpan bg-[url('/img/space-scene.png')] bg-[size:130%] bg-clip-text text-8xl font-black uppercase text-transparent">
				Epic Web
			</div>
		</div>
	);
}

To stop the animation when "reduce motion" is enabled, we can use Tailwind's motion-safe: modifier on animate-slowpan.


<div className="motion-safe:animate-slowpan bg-[url('/img/space-scene.png')] bg-[size:130%] bg-clip-text text-8xl font-black uppercase text-transparent">

With "reduce motion" enabled, the animation stops, and the background position is set to top-left. When "reduce motion" is disabled, the animation starts again.

Using the motion-safe modifier, you can prefix any Tailwind class and it will only apply the styles if the user has not checked prefers reduce motion.

In addition to motion-safe, Tailwind offers another modifier, motion-reduce. We can use this to show a more interesting part of the image when the user has enabled "reduce motion"

Let's take the background image position from top-left to center by adding motion-reduce:bg-center


<div className="motion-safe:animate-slowpan bg-[url('/img/space-scene.png')] bg-[size:130%] bg-clip-text text-8xl font-black uppercase text-transparent motion-reduce:bg-center">

So now, if you enable the reduce motion setting, the image will be centered, and have no animation.

This makes the site more accessible and ensures a comfortable experience for users who opt for reduced motion.

Transcript

00:00 In another tip that you can find linked below the video, we've created this pretty cool text behind image effect with a bit of animation that reveals different parts of the image. Now this effect is objectively looking pretty cool, but this sort of stuff can also trigger some motion sickness in some folks. There's an operating system level option called reduce motion

00:19 and we should really honor that. When this option is turned on, we want to stop this animation. Looking at the code for this example, all of the motion is depending on one single class, this animate slow pan class. And so we want to cancel this class if a user has chosen to reduce

00:36 motion at their OS level settings. In Tailwind, we can add the motion safe modifier and this will wrap our animation definition inside a prefers reduce motion media query. As a result, looking at our UI, you can see that reduce motion is not on and the animation is going. But if I click this,

00:54 the animation stops and the background position is set to top left. Turn it back off, the animation will start again and when I reduce motion once again, it stops. With the motion safe modifier, you can prefix any Tailwind class and it will only apply the styles if the user has not checked

01:14 prefers reduce motion. There's also the opposite modifier, motion reduce, and perhaps we could do something here where if a user has checked reduce motion like here, we give them a more interesting part of the image than the top left. For example, something near the middle of the image where we

01:31 have a few more colors somewhere around here. And so just like we've done motion safe here, we'll do motion reduce and we'll change the background position from top left, which is the default, to bg center. And this time, if the prefers reduce motion is set to reduce, in other words, the reduce

01:50 motion option is checked, then we will set the background position to center. And so now if I enable reduce motion, the image will be cropped in its center, which arguably looks a little bit better than when cropped to the top left. And so that way we still deliver a pleasant experience to the folks that have checked the reduce motion checkbox.

Simon Vrachliotis