How to respect reduced motion

Animations are great. I love animations, obviously, and I assume that you love animations too, because you're watching this video. But not everyone feels the same. Some people find animation disorientating or even nauseating. I have a lot of empathy for this because I once got an inner ear infection and I couldn't look at animated websites without feeling dizzy and sick. Now there are accessibility settings that people can set up on their devices in order to reduce OS-level motion. And browsers can pick this up too. This is great because it means we can craft animation with reduced motion users in mind. So this site here has a few animations already set up. And let's look at how easy it is to set up our animations accessibly. So right here we've got a fun page load animation and it staggers all of our elements in on this grid. It's really fun. But it's maybe not so much fun for someone that's struggling with vestibular disorders. So if we go into our interaction, you can see that we've got conditional playback under our settings here. And if we add a condition here, we have an option to choose prefers reduce motion. So we're going to click that. And we've got two settings here, No animation or Skip to end. So for this one, we're going to choose No animation. We're just going to disable the animation entirely. So now if we look into our preview, we've got our page load animation, everything animates in. But if we go into our user settings in our accessibility settings and we enable reduce motion. And now take a look at this animation again, you can see that it's not actually playing anymore. So this is perfect. We've managed to disable this animation on page load. Now you might be thinking, why don't we just do that for all of the animations on our page? And that's a really good question. And this is because not all animations are decorative and need to be turned off. Some animations are actually fine for people with vestibular disorders. If things are very simple, opacity fades, or small animations that cover small amounts of space, they're fine. Big animations that do a lot of things or move in parallax are often the worst offenders. And also we've got animations that are functional rather than decorative. So to show you what I mean by that, we're going to have a little look at this menu animation. So our menu animation animates these menu items in. There is a lot of motion and this would be triggering to people with vestibular disorders. But we don't want to turn it off, because if we turn it off, they won't be able to open the menu. And the menu is quite important. So in our conditional playback settings, we're going to choose prefers reduce motion. And rather than No animation, we're going to choose Skip to end for this one. So now if we open this up in preview and we click on our menu without reduce motion enabled, we get this nice little animation. If we go down to our system settings and we enable reduced motion, now when we open the menu, it just snaps into place, so there's no motion at all. This is perfect for people that find motion triggering. So with great animation power comes great responsibility, and that's how to set up your animations to respect reduced motion in Webflow interactions.