I’m experimenting with animations because I want to make my own navbar.
When clicking on the burger menu, I want this to happen:
- Have an overlay slide in from the right side while being invisible (I don’t want the user to notice this).
- Fade in the overlay with opacity (I want the user to notice this)
Then I want to reverse this when clicking on the overlay.
It worked, for a moment, and then it didn’t… Which is weird… As I didn’t do any changes between it working and not working.
When clicking on the burger menu for the first time the overlay abruptly slides in from right. Only when closing the overlay by clicking on the overlay itself and then clicking on the burger menu icon again I get the behavior I want.
Any help would be greatly appreciated, I’ve been pulling my hair out all evening over this!
I’m including pictures of every stage of the animation and the link to my website:
https://sindres-stellar-site.webflow.io/
