Reduced Motion Exercise

[00:00:00]
>> We've got an example of some auto-rotating announcements. I don't know about you, but that kind of stuff just distracts me immediately. And so, for users that have cognitive disabilities, seizure risk, it's not just annoying or distracting, it can actually be harmful. So for this we are going to implement reduce motion on this.

[00:00:28]
So I'm gonna go over to our example. That is in our product header. So we have this banner element. It's got a should animate flag, so that we can turn that on and off. Let's go up here to our banner element. So we already have some of the code we need in here.

[00:00:50]
I think if we had a way to call the user prefers reduced motion, we'd be able to control this. So we do happen to have a hook in here. This is a kind of a neatly packaged way to call this usePrefersReduceMotion code. So we already have it in here.

[00:01:10]
This is a React version, so it uses React useEffect. That will call a bit of code after the page loads as a side effect. And it will kind of allow us to call window APIs and things in the browser. So this is matching, this prefers-reduce-motion, no-preference. We are keeping it in a state variable of prefers reduce motion, and then returning that, so I have that variable to hold on to so I can check what's going on.

[00:01:45]
And a hook like this is useful cuz I can call it from various parts of my site or my application. I don't have to include this literally in every place. So it's got that change listener, it also cleans up after itself when it's done. So let's pull this in.

[00:02:03]
In our product header, we need that hook. So I'm going to import. And is it a default? Yes, usePrefersReduceMotion. Wow, thank you VS Code. It went found that for me. So where we wanna call this is any place that we're calling inmate. So there's two places, there's an initial call with this set time out and then on use effect, it will just keep on running.

[00:02:39]
I'm actually for time and energy purposes, let's look at the fully implemented version. So we can add a dependency on our use effect when we call this. So if userPrefersReduceMotion, we'll make sure we have that. And then in animate, I'm going to go and check whether that is true or false.

[00:03:06]
So if the user hasn't said that they prefer reduced motion, animate away, do your thing. So let's go see, may be I can implement this on our other one, other page. So on animate, we have this userPrefersReducedMotion. That variable is being called up here, so we pull in that hook, store it in a variable, it already has its own state managed internally.

[00:03:42]
So now I have this user prefersReduceMotion, and I can call it. Let's see if I really need to add this to our dependencies. See what happens. I think it might have just worked. I'm going to open the console, make sure that we don't have any errors. But it was animating before, now it's not.

[00:04:06]
So let's go turn off our setting, see if it starts. There it goes again. Sweet, so that is a very happy way of responding to prefers reduced motion. But use it for things like animating carousels like this one, we saw one on the sound cloud logged out homepage that had an auto-rotating carousel that would benefit from this.

[00:04:37]
So depending on where is the animated code coming from, you can control it with CSS or JavaScript.