Need to make animated navigation that hides all sections and shows 1 section

I can’t figure out a good way to make a navigation menu where when I click on a menu item, it shows the section on page for that item, and hides the other sections at the same time.

It is impossible for me to have the About button open the About section as well as close any currently-open sections (such as Contact Us), within the same animation, without hand-coding a close animation for every single section individually, which makes the animation completely unmaintainable and unscalable. If a new section is added, I have to make changes to every single animation on the page. There should be an intelligent way to hide all sections EXCEPT the one I clicked a navigation button to show.

In other words, it is impossible to animate all but the selected element for a given class, in order to hide other sections, at the same time as animating that section by itself, within the same animation. The designer changes all of my other animations in the same animation to either the class or selected element whenever I change a single animation’s target, so it won’t let me design more complex interactions, like what I’m describing.

It seems the class-based animation keeps interfering with the Selected Element animations.
Section class: hide = true seems to override the element’s: hide = false
I do not like this behavior. My understanding of how the animations work is that it would select via class or element ID, and then alter the state of the hide attribute for each element that is an instance of the class, rather than altering the class’s global hide attribute which overrides the element’s hide attribute.
The interpreter should be looking at fields like this: element -> hide: true/false? instead of like this element -> class -> hide: true/false?

I find this completely ridiculous. This is a pretty common use case for any button/animation.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @AMDphreak

Is this the kind of thing you are after? I have just used/adjusted the dropdown elements from a Navbar in the Layouts\Starter library.

https://preview.webflow.com/preview/test-dbe277?utm_medium=preview_link&utm_source=designer&utm_content=test-dbe277&preview=ecb207887f22b91707a94f8274bce7b3&workflow=preview

I’m sorry, no, I don’t see that page doing anything when I click on a link. It’s completely static. No animation involved (aside from changing the link’s color).

Example: About button opens up About section. After it’s open, if I click the Contact button, the About section (or any other section that is visible) should fade out, and then the Contact section should fade in. I wanted it to do these concurrently: fade out other sections, fade in selected section.

My page had the links (buttons) physically move from the center of the screen up to a typical menu location at the top of the screen, and fade in a section. If I clicked the button a second time, it would fade out the section. This is all well and good, but it didn’t work, when I needed to click a button for another section, while the current section was still visible. In that case, I needed to close all sections except the one corresponding to the pressed button, and then show the section.

Update: I’ve looked at your page’s structure in edit mode and it has 0 animations. It bears no resemblance to what I’m describing. And unfortunately I already changed my page so it no longer has the example.