Reduced motion

Imagine your designer wants to spice up your site by adding some animations. With CSS and maybe some SVGs you may well be able to make your site stand out from others. In our simple example we have a beating heart. Then there are these drawn lines where the two round tops of our heart are. In this case these lines are "nervous". They change constantly. To make our animated SVG pop even more, we have two outwardly pulsating circles behind the heart - one in orange and one in purple.

These are five elements your designer delivers, and it's up to you to animate them. Since you're an experienced front-end developer, it's a piece of cake for you to do. The page goes live and everyone is happy. What a nice effect! Who wouldn't love to have such an animation on their page? It's gorgeous!

Or is it? I have two problems with this gimmick:

1. The animation could distract people. There are users out there who get distracted very easily. Maybe they get too distracted and can't concentrate on the copy anymore? If only there were a way to make the animation stop...
2. In this case I've scaled down the pulsating background circles - both the tone and speed. Just imagine if they pulsated much faster and in more "psychedelic" colours because that's what your designer wanted. In that case, this animation could make people dizzy. There are people out there who react badly to this kind of rapid animation. Maybe they get vertigo or, even worse, they suffer an epileptic fit. If only there were a way to make the animation stop...

Make the animation stop

Actually it's quite simple. To animate an object with CSS, we can do something like this:

.theheart {
   animation-name: pulseheart;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   transition: 2s ease-in-out;
}

@keyframes pulseheart {
   0% {
       transform: scale(.7);
       transform-origin: center;
       stroke-width: 4px;
   }
   50% {
       transform: scale(1);
       transform-origin: center;
       stroke-width: 4px;
   }
   100% {
       transform: scale(.7);
       transform-origin: center;
       stroke-width: 4px;
   }
}

Yeah, that makes our heart beat. Now we want to stop it again. For that we have the CSS media feature prefers-reduced-motion. You can use two values: no-preference - in that case the user doesn't care about the motion. And then there is reduce - in this case the user tells you he wants no animation at all. And we should always listen to what the user wants! Always.

Reduce the motion

To meet the needs of the user, we now can go ahead and add something like this to our CSS:

@media screen and (prefers-reduced-motion: reduce) {
   .theheart,
   .firststrokes {
       animation: none;
   }
   .secondstrokes,
   .explode,
   .explode2 {
       display: none;
   }
}

We're using a media query to address every .screen type and to listen to whether the user prefers a reduced motion or not. In this case he does. With animation: none; we can stop our heart. Yes, dear designer, you have to be strong - but that's what the user wants.

Listen to the user

Okay, but how does the user let us know that he wants reduced motion on his desktop or mobile device? That's a global setting.

• On a Mac you go to "System Preferences > Accessibility > Display" and check the box for "Reduce motion".
• On iOS go to "Settings > General > Accessibility" and turn on"Reduce Motion".
• On Win10 go to "Settings > Ease of Access > Display > Simplify and personalise Windows". Set "Show animation in Windows" to off.

Video example