Skip to main content

The way “on mouse leave” behaves is a bit problematic in some cases.

Let’s say i have a component that has two states. Default, Active.

Active leads to default on Mouse Leave.


If i set the component to active on a page, as soon as i move the mouse around without even reaching that component the mouse Leave will trigger.


I imagine that it would be more logical given the name of the interaction that Mouse leave triggers only after my mouse was on the component.

Since i haven’t “left” the area because i was never on it.


May be two separate interactions would be interesting :



  • On Mouse out (triggers all the time when you’re not on the element)

  • On Mouse leave (only triggers after interacting, leaving, with the element).


Right now we’re paining our head on a projet because of this with menu elements that need to be opened and reduce in size after the first interaction. The way it works now forces extra (unnecessary variants).

Hey @Frederic_Fornini, thanks for flagging this!


We’ll pass this onto our team for improvement.

I believe i’ve found the cultprit. It’s transitions.


I’ve removed animation links between the components, now it works, for this specific case. I’ve already sent a file to support but it doesn’t include the current details.


To give a bit more context :

If you want to have animations between the variants, you just have to create any kind of animated transitions between them.

So i decided to use onKeyPress, which would avoid animations onHover and such while creating a transition between two elements allowing them to be animated.


Prior October 2023, this technique was working pretty well (and i was pretty proud of myself having found that trick). Since then an update to variables has been made and now it crashes the prototypes.


Which is too bad cause it really helped creating smooth transitions while using variables.

Anyways this might help to investigate where to look.

Reply


Terms & ConditionsCookie settings