Streaming live at 10am (PST)

QUESTION - How to I bring a nav menu in from the right? Example attached

I’ve spent the day learning how the navbar and menus works and have created something that is 95% there.

I’ve got the nav button working smoothly and it brings in the nav menu using an appear/disappear. Could somebody tell me how I can animate this to come in/out from the right of the screen? I think it might have something to do with the ‘move’ function in the animation screen, but I’m not sure how it works.

I’ve mocked up a page and attach a link to demo how it works so far.

https://preview.webflow.com/preview/rubiks-marketing-consultancy?utm_medium=preview_link&utm_source=designer&utm_content=rubiks-marketing-consultancy&preview=1e3c32354a5c9ea067909708bfd79818&pageId=608a86282f394fda011620b2&mode=preview

Big thanks in advance.

Hey,

you’re definitely right that the move action is the way to go.

Start by setting your “display: hidden” setting as an initial state in your interaction. Also add a move action with the X-position of the menu container set to 100% as an initial state. This will push the whole container 100% to the right.

Add another move action (not as initial state) to 0%. This will push the container to cover your whole page again. Change the easing to your liking.

For the close interaction, simply add an action for the container and push it back to 100% on the Y-axis.

Then you should be good to go :slight_smile:

1 Like