How do I animate the dropdown to fade in for main menu?

Hi this is my read only link for my website

https://preview.webflow.com/preview/alexgcreative?utm_medium=preview_link&utm_source=designer&utm_content=alexgcreative&preview=c066b7cb639831449e101e80cc1aa6c8&workflow=preview

If you hover over the “UX Design” link on the top menu on the homepage, you can see the dropdown opens but its instant. I want it to fade in or slide in smoothly but I can’t figure out how to do that.

Anybody have an idea?

Thanks

Hey @cyrezeraser, just select your dropdown and go to interactions, you will have an extra option to animate the dropdown when it opens and/or when it closes
Screen Shot 2024-01-29 at 6.23.58 PM
I hope this helps!

Hey Pablo,

I updated the site with that change but it doesn’t work. It fades in the menu link “UX Design” the first time you hover over it but its not fading in the dropdown menu which is what I want. I want the UX design menu item to stay static and then when you hover over it, the dropdown menu will fade in and fade out depending on if your mouse is over it.

When I used the element trigger “Dropdown Opens”, it doesn’t affect the dropdown submenu like it should.

Does that make sense?

Hey @cyrezeraser, I see, so to make it work as a hover interaction, keep the dropdown with the open menu on hover, and add another hover animation to the dropdown element. You will need one for hover in and one for hover out. They key here is to know that on your hovering interactions you don’t need the hide and show actions, because that will come form the dropdown element, so you can use an opacity interaction on the dropdown menu, or something like that. I hope this helps.