prefers-reduced-motion

[00:00:00]
>> So yeah, the other big point is I know that this entire workshop is about just animations, CSS animations, using JavaScript for CSS animations. But the fact of the matter is that not everyone wants animations. So it is important to know that there's this media query called prefers, I have it somewhere here.

[00:00:29]
Okay, media prefers-reduced-motion. And so I have it in the base styles over here, so it's actually being inherited over here. And so the two options for this, you might think true or false, it's actually not, it's really weird. So there's prefers-reduced-motion reduce, which acts like a false. And that means that the person using their computer or mobile device does not want animation.

[00:00:57]
And so the reasons for this may vary, but it's usually because too much animation might be nauseating. They might have a vestibular disorder, so it's important to include this media query wherever you're using animation. The default value, which evaluates to true, I guess, is no preference. And so that means I don't care if they're seeing animation or not.

[00:01:21]
Unfortunately, there isn't a value for, please animate all the things, although I don't see that that would be too popular. So prefers-reduced-motion does not mean just stop all animations on the sites. It might mean make the animations less jarring, make the duration a little bit quicker, make the movements less sudden, or make the distance between where things are moved just a shorter distance.

[00:01:52]
So there's a lot of things that you could do with prefers-reduced-motion. And so you could get creative with that, but the main point is that prefers-reduced-motion, you want to reduce the animation. Such that if your animations are meaningful, you still want to portray them in some sort of way, but not in a way where it goes against the will of the user.

[00:02:15]
Now, to test this, you could either go into your system settings and change it over there, but that's a bit much. So over here, if you open the command palette again, which again is C+ Shift + P on Windows, Cmd + Shift + P on Mac, and you type reduce, there's an option here, Emulate CSS prefers-reduced-motion.

[00:02:40]
And so when we do this, now there's actually no animation. So, We could turn that off. And we could click Do not emulate CSS prefers-reduced-motion. And so now, we're gonna get our full animations. So that's a very important thing to keep in mind. So any questions about that?

[00:03:10]
Yeah.
>> On that topic of usability, how do animations affect accessibility?
>> So that's a good question, because accessibility is a very broad topic, and I'm definitely not an expert in it. As far as ARIA technology and accessibility in the browser, it's not going to really be too relevant.

[00:03:37]
Just because that's more to do with things like screen readers, keyboard accessibility instead of mouse, vision impairments, and stuff like that. But in terms of just accessibility for people who are able to use all of the devices and have normal scene and everything, it's accessibility on the level of helping the user out and just letting them know.

[00:04:05]
We talked about at the very beginning what they could do. And so I feel like this is very important, because it's very commonplace on our mobile phones, but not really on websites. And sometimes I'll go on a website and I won't understand what's going on, because there is no indicator that, hey, something's happening right now.

[00:04:28]
Or you could click this, or you could do that, or you could shift this over or something like that. One of the most common things that I've run into is when I click a Submit button or a button that's supposed to do something, and I get no indication of anything happening.

[00:04:44]
There's no loading spinner, there's no animation, there's no response that, hey, you clicked this button, so something will happen, there's not even that. So what do I do? I click that button again, and again, and again. And so sometimes bad things happen when you do that, you might submit the form five or six times.

[00:05:05]
So yeah, it's important. But on the flip side, animation can be overused, in which it does adversely affect the accessibility of a website. Because you might have models that are too flashy or just things that really get in the way of the normal user flow, which make users want to just not use your website or web app altogether.

[00:05:30]
Okay, so one of the questions. In flip, so the flip technique, is it guaranteed that all the elements would have moved to a new position in our next animation frame call where we get the new bounding rectangle coordinates? What if the elements need multiple animation frames to finally get painted to their new positions?

[00:05:48]
Our flipped function would fail, right? And so, yeah, the answer is yes, but if you are missing animation frames, then you definitely have bigger problems. So with that said, you need some sort of way of indicating, hey, my layout has successfully moved to its final position. Now, you could read the final rectangle, and hopefully, that's the very next animation frame.

[00:06:12]
Otherwise, again, you need some sort of indicator, but in that instance, you're already missing animation frames. So flip is going to look really weird cuz it's gonna go like this, and then it's gonna animate again. So, yeah, I would say use flips sparingly, and make sure that your layout changes are performance and that they're happening within a single animation frame.

[00:06:38]
Someone else who asked, once the ball catches my pointer, referring to the reactive animation lesson, it is, I lost it, once the ball catches my pointer, it just stays stuck to it. What should I do to slow it down so that it follows after a delay? Transition delay seems jarred.

[00:06:57]
Okay, so yeah, going back to that example, I would say do not use transition delay. And so the reason for this is because that transition delay is, it's not really going to do what you expect. And so that's why you can't really use transition delay, in order to have the same effect over here.

[00:07:18]
Yeah, so also easing gets a little bit weird as well. So yeah, it's just something you have to keep in mind. So this is one of those topics, sorry, not topics, but one of these applications where you don't use transitions, you don't use animation, instead you use request animation frame.

[00:07:42]
[BLANK_AUDIO