Having a few troubles with Nav + Animations

Hey Folks,

Thanks in advance for any help you could offer. I know it’s a lot of text, I’m just trying to be as detailed as possible. 29%20PM

So I’m having 3 separate issues so I’ll get to it.

ISSUE #1 - The way my site is built, when you expand the nav, A dark BG element fades in slowly, turning everything except for the nav dark. It works great, except for some reason the FIRST time you expand the nav after a page refresh there is a brief stutter where it quickly jumps to 100% opacity first and then down to 0% and THEN does its slow fade in. If you collapse and expand the nav after the firs time the issue goes away and the dark BG fades in perfectly.
ALSO with this – I have three separate nav tabs “about”, “services” and “contact”, and when you expand the nav, the ‘about’ info fades in perfectly, the issue is when you collapse the nav the ‘contact’ info briefly jumps to 100% opacity while the nav is closing and it looks all jumbled over the ‘about’ info that was there. This issue also only happens ONCE, if you expand and collapse the nav again, it doesn’t re-occur.

ISSUE #2 - After you expand the nav via clicking the blue hamburger, everything works fine as long as you click the blue hamburger to close it also. For some reason though, the site is treating the entire nav bar as a clickable link that closes the nav. The problem though is I don’t want the entire nav to be a button, just the hamburger. The site-push animation is tied to the hamburger only, not the sidebar nav. So if you click the nav to close itself, it gets out of sync with the site-push animation and then you’re caught in a loop of each animation being out of sync even if you use the hamburger.

ISSUE #3 - Last but not least, when you have the nav expanded, you can click between the different tabs of ‘about’ ‘services’ and ‘contact’ and everything works great as long as you give some room to breathe between each click. If you wait until the fade-in animation of the text to fully complete. But if you get antsy and click one nav item and then quickly click another, instead of one animation starting then stopping, they both start and you end up with two text blocks over each other. How can I prevent this?

Thank you so much again for your time, sorry if it’s a lot. I just try to save up my issues for one post rather than making several different posts.


Published site : https://alexanders-first-project-eadf69.webflow.io/

READ ONLY LINK : https://preview.webflow.com/preview/alexanders-first-project-eadf69?utm_source=alexanders-first-project-eadf69&preview=63a453e904dfac855e1b352651025206&mode=preview