Streaming live at 10am (PST)

Prevent animation if element was clicked?

Hey everyone! I have a quick question regarding interactions.

I created an off-canvas menu that teases itself a bit when hovering the logo.
http://interactionissue.webflow.io/

There are 4 interactions:

  1. Hover over logo -> move down a bit
  2. Hover out -> move up again
  3. Click on logo -> open the whole menu
  4. Click again -> close menu

The problem is that the menu doesn’t stay open when I hover out. I understand it’s because of the hover out animation, but how can I prevent this? Some custom JS?

Greetings
Martin

There’s a lot of design ways to solve your issue. The 2 interactions could be disconnected. I mean the bar that goes down a bit could be a standalone bar, not the actual menu. It would look the same because they would have the same color.

That’s one solution but you can find others.

1 Like

Ah, that’s a neat workaround. I’ll create a second bar for the tease!

Thank you so much for your quick help Vincent!

You could also make another element, invisible, cover the logo so no hoverout is register.

Millions of possibilities :slight_smile:

1 Like

Actually this would be even better for me, because I planned to transform the logo on-click anyway!
Thank you again!