Closing a menu after go to page section

Design help Animations & Interactions
1

Hi!

Have a problem with close menu after go to page section.

I want the menu to close, all the content go up, and the transition to the section is triggered

If I add animation that when I click on a section the content goes up, then the section transition moves. Also I tried to use scroll for this option. But it works bad :frowning:

So is there a way that raising the content up and made navigating through sections - at the same time?

Here is my public share link: Webflow - Most updated version

2

Hey @OlegN, I hope I understood correctly, but what you are looking for that after clicking on a link inside of the menu, you want the menu to close, as well as scrolling to section (the second one is already working it seems)?

I think you simply need to add, on every single menu link, a Click Trigger, and have it play the same animation that closes the menu when you click on the X button (from what I can tell, it’s the “close menu link”, and add another one for “second click” in order to make sure the X closes)

Hope this helps, cheers!

3

Hi, Mr_Finn!

Thanks for your advice! I have tried it. Add animation on link. When I click on the menu link, I raise all the content up. But in this case, the transition does not occur correctly.

As I understand it, I need to somehow configure it so that the content first goes up and then the section goes through. But I don’t understand where to configure the section transition delay…

New link https://preview.webflow.com/preview/bluria-5d03f02f3df10a749e-ac76848013577?utm_medium=preview_link&utm_source=dashboard&utm_content=bluria-5d03f02f3df10a749e-ac76848013577&preview=e0ed1a6a3cfb3deef387334ecdc94006&mode=preview

Published - https://bluria-5d03f02f3df10a749e-ac76848013577.webflow.io/

4

Oh I see, you need to add a delay to the scrolling event. Just go to your project settings, from there you can access a page “custom code”, where you can add any code or script you need.

Check out these 2 links, they should be helpful, if like me, you are a designer and not a developer:
https://api.jquery.com/jquery.queue/
CSS Transition Delay

Your only issue now is to try and figure out the name of the anchor/scroll animation, so you can add the name in the delay line. Try Exporting your project and opening up the scripts and CSS files ? I think a developer would be better at helping with this.