When I click on my open menu icon, how can I make the "Nav Menu background" ease in when clicked on?

Design help Animations & Interactions
1

Here is my preview link! Hoping someone can help me out. I am trying to add an ease in from left animation when I click on the hamburger menu icon.

https://preview.webflow.com/preview/tanias-fabulous-project?utm_medium=preview_link&utm_source=designer&utm_content=tanias-fabulous-project&preview=12aac864ca21613456ee198c8dca2939&mode=preview

2

HI Tanya,

when you say you want an “ease” what do you want to do? do you want it to slide in, fade in flip in? you need to decide what kind of animation you would like to achieve… otherwise it is a little hard to help :slight_smile:

In any event if you want to do a slide, then you should add an interaction as follows:

  1. unhide the Nav Menu/Backrgdound div and set it to 100% width and 100% height and set position to absolute (not fixed)
  2. set its position to negative 100% to the left (so it will slide out from left to right)
  3. set the close button to position relative
    the interaction should look as follows - you will need an open interaction and close interaction
    Open - Nav Menu/Background – move 100% (to the right)
    Close - Nav Menu/Background – move -100% (to the left)

you can chose the duration - like .8sec and the easing you like (experiment and see what strikes your fancy)

then you add the Open interaction to the hamburger (like you did) and the Close interaction to the close button and you are done…

N.B. look at this website - there are a ton of clonable examples that you can port over to your page , including many nav menu and hamburger interactions… once you clone it you can look at how the animation is set up so you can get your own ideas…

1 Like
3

Thank you. It seems like I got the ease in animation to work. I tried to make the close button relative but it didn’t remain on the top. So I had to give it a -44 position top. Not sure if this is the correct way.

Also when I close the menu, the “X” blinks weirdly for some reason.

Also, for some reason when I send this link to view in read only mode - the navigation does not seem to work. Can you please let me know if it works for you.

https://preview.webflow.com/preview/tanias-fabulous-project?utm_medium=preview_link&utm_source=designer&utm_content=tanias-fabulous-project&preview=12aac864ca21613456ee198c8dca2939&mode=preview

4

Hi thank you for responding. For some reason when I click the “X” to close the menu it blinks randomly. I also set the button position to relative but had to give it a position top of -44% because it got entered vertically when I made it relative.

Also for some reason this navigation does not work when I share this link in a read only mode. Please let me know if you can answer this.

Also when the nav opens, I want to prevent the user from scrolling down to the page. How can I do this?