Dropdown Open Animation

[matt-tastic]

Okay forum friends. I’ve given this the last 4 hours of my life & feel like a compete goof. But I cannot for the life of me get a navigation dropdown list to animate on open. I’ve tried every old tutorial & scoured the forum but can’t find a reliable answer. So, I must be doing something insanely wrong.

It appears you can finally get the close animation to work if you set the “Close Delay” on “Dropdown Settings” to match your actual interaction. But as for the opening of the list, I’m dead in the water.

Please help!

---

Here is my public share link: https://preview.webflow.com/preview/animatedd-51e4be78079d7d8051ad6b5351f?preview=1e8e915f06cc2badd75a7eed60cd36cb

---

PS: I’m on Mac OS 10.11.5 & Chrome 51

[AlexN (Alex Nichol)]

We need to take into account the predefined state of the dropdown when the dropdown is closed. When closed the dropdown list is display none.

Match this in your initial appearance settings on the interaction.

Then tell the interaction to display block then fade in and then fade out then display none.

Like this

[matt-tastic]

Thanks @AlexN.

I’ll also add, for any of you other newbies, to look closely at the image given above. Notice AlexN has each trigger’s step listed individually. I was performing the “Display…” & the “Opacity…” steps simultaneously in 1 trigger step. If you think about it logically, it makes sense the order in which you’d want to perform each step. Be careful not to miss that!