Resize Observer

[00:00:00]
>> Kevin Powell: So there's one thing you might have noticed along the way you might not have, but if you have a mobile navigation. One problem that can happen is when you're resizing the browser. If it's opened, it's fine, but if it's closed, you could run into the situation where, when you get to here, it's opened, and then it transitions away because of all the transitions and stuff we've said on it.

[00:00:21]
And it's just because all of a sudden it's getting to that media query and then the transition kicks in and it goes and hides off and it's a little bit annoying. I will say I get asked about this all the time and my usual answer is the only people that are ever resizing their browsers in these situations are other developers or yourself.

[00:00:38]
It's, a regular user's not doing anything. So it might not be something you actually have to worry about, but if it really does bother you, there's ways that we can solve it. So I'm just gonna do this in my main.js this is where we have our navigation stuff already.

[00:00:56]
And for this, we want to be using a ResizeObserver. So if you've never used a ResizeObserver, they look like this just new resize observer. There's older ways of doing this, they're probably perfectly fine just the ResizeObservers just really good at just doing this one thing. So from a performance standpoint, it's really good.

[00:01:19]
[LAUGH] doing what it does. So, yeah, just a new ResizeObserver there. So I'm just gonna bring this one in right here, resizeObserver is a new ResizeObserver. And it's just going to do something every time the page is resizing, basically. When we're doing this, we can have it looking for different things, but in this case, all I want it to do is look at the body and when the page is resizing, we can add this document .body.class list and just some sort of class on there.

[00:01:51]
It could be a resizing, it could be a no animations. There's a number of different things that you could have it put on there, so we can come in here, document.body.class list, and we said resizing, right? So resizing, but anything that would make sense for you, just so when things are resizing, we wanna make sure nothing's actually happening, and that means we wanna go to our CSS file now.

[00:02:19]
This makes sense in the utilities. So I'll just put it all the way at the bottom of my utilities. And we probably don't need it. Yeah, I'll put it at the top actually, just so we don't have to scroll so far right here. Because of the way we have our layers set up, you probably don't need to do this, but what I'm gonna do is just transition none important.

[00:02:46]
Again, I don't think we need the important on here, but if, yeah, I don't think we really need it. We'll try it without, but you could throw the important on there if you really just wanna make sure. But using layers, it should make it so we really don't need to have it there.

[00:03:00]
And animation, none. I'm putting animation none. I don't have any animations on my page. And I would encourage testing in this situation if you do have animations because this would just turn off the animations. The other alternative is an animation play-state of paused I think it's paused yeah, paused.

[00:03:22]
So if you had animations running on your page and someone resizes, just the animations in their current state would actually pause where they were. And then when you finish resizing, they would start going again. Maybe you don't wanna have this at all. Maybe you only wanna do this for that one specific thing.

[00:03:37]
So you'd be more specific with what you're targeting, instead of doing it as this bulk thing for your entire page. I also realized I did it on that class, but I wanna do it for all the children that are in there. So, absolutely every element that's inside my resizing is going to get no transitions and the animation, either the play state paused or just turning off the animations, it depends on your use case.

[00:03:57]
So, when we do this, we're partway there. We're gonna be adding that on there, but we obviously also need to be able to remove the class from it when the animation stops. And to do this, we're gonna use the request animation frame, and then we need it to actually after that, tell it to stop observing.

[00:04:14]
No, sorry, we need to actually tell it to observe the body itself for the resizing. The reason we're using request animation frame is because when we resize the browser, the browser is repainting constantly. So it's just repaint, repaint, repaint, repaint. So it's in the terms of the browser.

[00:04:30]
These are all animation frames that are going on. And so when we stop resizing is when it gets to the request animation frame, there's no more animation frames running, so then we can remove the resizing from the class list right there. So that's why I'm using a request animation frame.

[00:04:47]
There's other techniques that use set timeout instead, just so after a certain period of time passes, then it would remove it. But this works really well, and it hooks into how the browser likes to work. So in our JavaScript file right here, we can bring that in. So we're just requestAnimationFrame.

[00:05:07]
We're removing the resizing from there. And then that last part that we had here was just, we need to say resizeObserver. We have to actually tell it to do something. We created the resizeObserver. It doesn't know what to watch yet. So then we say, resizeObserver, observe, and then we tell it that we want to look at the document.body.

[00:05:31]
And it wasn't working and we saw that it wasn't adding on the body there, just because I had class list, but I forgot to put add, so it never added it to the class there when we were resizing. So now you can see, as long as that's resizing, you can see it's on there, and then as soon as I let go, the class goes away.

[00:05:47]
And so if that resizing is on there, when we go larger or smaller, we don't get it firing at all. And then if we're not doing it, the class goes away. So then the animations work as expected.