reduced-motion Exercise

[00:00:00]
>> Marcy Sutton: So, let's play with this for a couple of minutes. There's similar to the other ones there's the empty or like the card flip. You can go play with what I just worked on. Maybe the bad example, you could play with adding some reduced motion there. And then there is a, let's go see what's in here.

[00:00:17]
This is just like a blank canvas one. That, at least yesterday, when I was playing with code pen, for some reason CSS wasn't working. It was bizarre. So hopefully that'll work for you today and not be the hotel WiFi problem I was having. But you can just add some sort of a transition and then add the media query to turn it off.

[00:00:37]
And the reduced motion setting is supported a lot of places now. I think it's Safari, Firefox, Chrome, and Edge is chromium based, so they should have it too. So it's used widely enough that I think we can safely fall back on that one. So that's some animation. How did that go for everyone?

[00:00:57]
Awesome, yeah, I love that media query because it's pretty easy to play around with. It's a good thing to start with, and you can see that effect that it has by toggling that operating system level preference. I'd love to see something similar to that reduced motion for focus, like we saw with focus-visible.

[00:01:15]
Like if the user could go and toggle that on and off, that would be amazing. So, let's go, keep going. So reduced motion, we saw the example with the the little card flip widget, just being able to change how that works. The vanilla JS one, I believe is, yeah, it's that same example with the circles, if you want to go back and play with that one later.

[00:01:45]
It just kinda hard to look at though. I feel like it's amazing how like, there's so many pulsing animations and autoplay all over and it seems like everyone else is fine with it. And then there's like, always, when I present things like this, it's always like visibly affecting people.

[00:01:59]
So I think it affects more people than a lot of folks in the industry realize. So it's great now that we have more tools and more capabilities to try and make things more personalized and safe.