Dropdown list animations and interactions

I’ve added a dropdown element in my website. I allowed it to open on hover. When that interaction happens, how do I delay the transition for hovering on and hovering off?

1 Like

Just add a delay in the first animation of the hover out interaction:

That’s the thing. There are no interactions or animations right now. I just checked the box for the dropdown named “Open on hover”. Any other ideas?

Okay so you’re using the native functionality. There is no way to add a delay that I know of. You would have to use custom JS or build it out as an interaction.

I see. What’s the best way to build it out as an interaction?

With IX2 using the dropdown trigger. You would have to specify, in a VERY granular way, how you want the menu to function. If you can give a play-by-play I’d be happy to guide you.

Thanks for the help!

  1. Hover: menu opens
  2. Hover: dropdown folder background color changes
  3. Transition for both of these: 350ms
  4. Hover over menu items: background color changes
  5. Transition: 350ms
  6. Hover out: menu closes
  7. Transition: delay 350ms

Let me know if there’s anything else to specify.

So now all you have to do is put those steps into a dropdown interaction.

It would be an On Hover interaction. You’ll need to disable the native On Hover in the settings. I don’t know how well this will play with the native on click functionality, so you might need to build a completely custom menu from divs.