matm

Sweet, I'll have a play around. Thanks

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. https://codepen.io/mathatcat/pen/PobPgpj

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.

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: https://codepen.io/tkruca/pen/qBNGOLm. 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