Prevent animation if element was clicked?

Design help Animations & Interactions
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.

1 Like
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:

1 Like
5

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