Help with Interactions Appearing Differently

[TylerCourts]

Good morning Webflow community!

I was hoping to get some help on figuring out a interaction issue I am having. On the “Welcome” page of this site, clicking the “About” link in the Navigation bar triggers an interaction to expand a dropdown menu. When clicking the link both the first time to expand the menu and retract it, the interaction looks fine. However, I have added a close button for more intentional UX that the user can click to close out of the menu as well. When you click that, the menu retracts, but the animation is very sudden.

Can anyone help me figure out why that is? It is the same animation being triggered both times, so I’m not exactly sure why it is showing up differently.

Thanks in advance for the help!

~ Tyler

---

Here is my public share link: LINK
(how to access public share link)

[TylerCourts]

Bump…

Anyone have any ideas on this?

[zafremedia]

Hi @TylerCourts
I managed to fixed the problem and here is every step you need to take.
1-Instead of height going from 0px to auto use 0px to 430px and 0px again on close

2-Remove open about menu animation on click for .nav-dropMenu

3-Remove close animation for second click on about button

4-Apply nav-link-icon rotation to all elements with that class

5-Set padding for .nav-dropMenu to zero instead give more margin to .default-container. also set the height of .nav-dropMenu to 0px

6-Remove all interactions on .nav-link

7-Do not change the display in either of the animations

[zafremedia]

I used a custom easing function but you don’t need to I was just testing.