We wanna be good citizens and make responsible use of motion. So let's take a look at the strategies we have to do. So, All right, check this out. I am here on the web.dev website from the Chrome team on the animation and motion page. And if I scroll down, it states that by the age of 40, over 35% of adults will have experienced some sort of vestibular dysfunction. So this can be disease spells, migraines, vertigo,

of vestibular dysfunction. So this can be disease spells, migraines, vertigo, or even permanent vestibular disability. This is not great. So that doesn't mean that 35% of the population over 40 will be affected by your emotions on your website, but technically this portion of people, 35% of 40 plus might get affected. They're exposed to the possibility that it will affect them. So that's a whole lot of people

They're exposed to the possibility that it will affect them. So that's a whole lot of people and there's also younger people that get affected by this. So we need to do the right thing and be a good citizen. It would be a shame to throw away all these animations to honor and respect these accessibility concerns. But there's a way that you can let the user be in charge and decide whether they want animations or not. So let me show you how you can do it. Let's take this example of a party animation

So let me show you how you can do it. Let's take this example of a party animation that triggers on hover. It's called party because, well, as I hover over the square, you can see that it's having a good time bumping and bumping to the beat. Uh, but this might be a little too much for folks that have issues with motion. So let me show you how you can guard this because what we would like is

So let me show you how you can guard this because what we would like is to offer a different kind of animation. It doesn't need to be completely flat, but let's enable the other animation that I've got here called Pulse. And this one is much more subtle. It's just going to change the opacity of the square in and out. So there's still some sort of animation and motion going,

of the square in and out. So there's still some sort of animation and motion going, but this is not going to trigger any motion sickness because there's not really motion. It's just the opacity fading in and out. And this is considered a safe animation. So what we wanna do is let the user decide if they want the pie or if they want the pulse, which is the safe uh, version. So at the OS settings level, uh,

or if they want the pulse, which is the safe uh, version. So at the OS settings level, uh, users can decide if they want to opt out of motion on the Mac. This happens in the accessibility options. And then if you go to display, they will be a reduce motion checkbox, this one right here. And so there is a way to determine if the user has opted for reduced motion or if they haven't and they have no preference.

for reduced motion or if they haven't and they have no preference. CSS gives us a handy at prefers reduce motion media query to check just that. So if I go at media prefers reduced motion, we have a couple of options here. So I'm here in the MDN website for prefers reduced motion. And if I scroll down, you'll see that we have two options to choose from. No preference is when a user has not actively

that we have two options to choose from. No preference is when a user has not actively explicitly decided to opt out of motion. Where reduce is when they have checked that reduced motion checkbox in the settings. So if I was to keep the media query like this, it would check if the user has checked the checkbox to reduce motion. You can see here that it's the equivalent because this is the true the value.

You can see here that it's the equivalent because this is the true the value. So we could decide to serve the party animation to everybody by default. And then if a user has explicitly opted out of the motion with reduced motion, then we can serve the pulse software animation. But I think it's even better to do the opposite, have the safe for everybody pulse animation by default. And if the user has not opted out,

have the safe for everybody pulse animation by default. And if the user has not opted out, we can enhance to the party. So what I'll do is move this media query that checks if the user has opted out, but instead I'll change it to prefers reduced motion. No preference. So now this is a check to say that inside of here, user is fine with motion or at least hasn't specified otherwise.

user is fine with motion or at least hasn't specified otherwise. And so I will copy this whole square hover block here. And by default we will keep the pulse animation as the baseline. So I'll remove this comment, and inside of here, I will paste the block, but we will switch from the pulse one to the actual party upgrade. So the default is the pulse animation,

to the actual party upgrade. So the default is the pulse animation, but if the user hasn't specified that they don't want motion, we can upgrade them to the party. So right now my reduced motion checkbox is not checked. So I'm expecting to see the party animation and yes, I do. But if I was to turn on the reduced motion here, let's check it again. And now we have the pods. Very nice.

here, let's check it again. And now we have the pods. Very nice.