▼
Streaming live at 10am (PST)

Prevent animation if element was clicked?

#1

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

#2

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.

#3

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

Thank you so much for your quick help Vincent!

#4

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

Millions of possibilities :slight_smile:

#5

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