Overlay Menu: How to lock the body scroll when active.

[matm]

Hey, Could do with a little help please, I'm new to GSAP (and Javascript in general), I've got a pretty basic grasp of GSAP and I've put together an overlay menu based on this copepen: . I haven't had chance to make my own, but it mimics this on the most part. With this method  the overlay allows body scroll when active, I would like to stop that. 

 

I've trawled lots of other pens/forum posts and found various methods to try but it's just left me more confused. Can someone please advise how to achieve the body lock and whether this method is actually a good way to do an overlay menu, or is there a more simple method to achieve the same thing. I've had a few ideas: 

I've seen there's the classList API  amongst (other methods but they arent GSAP methods) but I'm not 100% sure how that fits into this build, would I add it to the navBtn so it adds removes a class from the body on toggle? Or, would I '.set' the timeline to add a class to the body? With the timeline being reversed on click can I '.set' the body at the end of the timeline, so when it's closed the body: fixed class is removed? 

I've tried reading the docs on the site but I'm ADHD, so I struggle with large pages of info etc, I end up going down rabbit holes and getting lost. 

 

Any help would be really appreciated. 

Thanks Mat 
 

See the Pen qBNGOLm by tkruca (@tkruca) on CodePen

[akapowl]

29 minutes ago, matm said:

Can someone please advise how to achieve the body lock and whether this method is actually a good way to do an overlay menu, or is there a more simple method to achieve the same thing.

 

I don't see much wrong with this method, except for one thing: In the CSS there is a transition: all set on the .nav li a.

 

This causes some stuttering on the links when you tween on them with GSAP because GSAP has to fight with the CSS transition, so this is something you would want to avoid. Except for that it works quite good, I would say.

 

For the scroll-blocking:

This is more of a general thing, but you can certainly do that with GSAP - and even pretty easily.

What you want is to set overflow: hidden to your scroller element (the body here).

 

You could achieve this by simply adding a 

 

.set('body', { overflow: 'hidden' })

 

at the very beginning of your timeline and you should be good to go.

 

 

I added a scrollable section in this following demo to show how it works, and beside that I also set your menu-button and menu to position fixed, so they will always be reachable whereever you are on the page.

 

See the Pen dbb2746f42f81aaba2e44ae75f930d34 by akapowl (@akapowl) on CodePen

 

 

I changed two more things in this demo (but I guess they are just taste-dependent):

 

I removed the ease from the stagger-object - because it stretched out the staggering duration over time (which felt weird to me) and I decreased the duration of the tween on the nav-links because it felt a bit long to me. But again, this is just taste-dependent - if you don't like it, you can always change it back  

 

Hope this helps.

 

Cheers, and welcome to the forum.

 

[matm]

1 hour ago, akapowl said:

 

I don't see much wrong with this method, except for one thing: In the CSS there is a transition: all set on the .nav li a.

 

This causes some stuttering on the links when you tween on them with GSAP because GSAP has to fight with the CSS transition, so this is something you would want to avoid. Except for that it works quite good, I would say.

 

For the scroll-blocking:

This is more of a general thing, but you can certainly do that with GSAP - and even pretty easily.

What you want is to set overflow: hidden to your scroller element (the body here).

 

You could achieve this by simply adding a 

 

.set('body', { overflow: 'hidden' })

 

at the very beginning of your timeline and you should be good to go.

 

 

I added a scrollable section in this following demo to show how it works, and beside that I also set your menu-button and menu to position fixed, so they will always be reachable whereever you are on the page.

 

 

 

 

 

I changed two more things in this demo (but I guess they are just taste-dependent):

 

I removed the ease from the stagger-object - because it stretched out the staggering duration over time (which felt weird to me) and I decreased the duration of the tween on the nav-links because it felt a bit long to me. But again, this is just taste-dependent - if you don't like it, you can always change it back  

 

Hope this helps.

 

Cheers, and welcome to the forum.

 

 

 

Thanks so much, really appreciate it.  I cycled through a few methods, but hadn't figured I could actually add the overflow:hidden property to the timeline like this.  I removed the transitions from the css and sorted out the button position too on my version. So, at least I was on point with that stuff haha. Again, thanks for your help, definitely saved me from a few more hours of frustration. 

 

 

[matm]

Just wanted to add to this... I found by placing .set('body', { overflow: 'hidden' }) at the start of the timeline the content on my page jumped as the body scroll returned after the nav closed. I added overflow-y: scroll to the nav, but this only reduced the jump a little, even with the scrollbar. So by placing it in the timeline between the overlay and navlink animations, the jump is then masked as the animation finishes.  I'm sure there's probably a better way to do it than that, but it works for now. I've added a rough reworked pen for the craic. 

 

See the Pen PobPgpj by mathatcat (@mathatcat) on CodePen

[akapowl]

1 hour ago, matm said:

the content on my page jumped as the body scroll returned after the nav closed

 

Yeah, depending on how things are set up on your page, this is bound to happen due to the scrollbar appearing and disappearing - this is just one of the caveats to run into and you'll have to find workarounds for, when doing something like that. Yours seems to work quite right, so good job.

 

Another option could be considering to set the body's width to 100vw to begin with (alongside an overflow-x: hidden).

This will prevent the jumpiness, but it might become a pain when wanting to align element on the right side of the page because they will be overlapped by the scrollbar from the start.

 

See the Pen ebe52203662737423cdd50a2f1d0b87f by akapowl (@akapowl) on CodePen

 

[matm]

Sweet, I'll have a play around. Thanks