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
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!
- Hover: menu opens
- Hover: dropdown folder background color changes
- Transition for both of these: 350ms
- Hover over menu items: background color changes
- Transition: 350ms
- Hover out: menu closes
- 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.