Skip to main content
Question

(almost solved) "Mouse leave" prevents other "Mouse leave" interactions. Any workaround?

  • April 6, 2023
  • 4 replies
  • 1086 views
D

Dear Figma Community, any idea how to make this work?

My goal: having 2+ videos, which only play while the mouse hovers above and pause while not.

My plan: adding a “Mouse enter” interaction to the video, which makes the video play and a “Mouse leave” to make it pause when the mouse exits the area.

The issue: this “Mouse leave” interaction gets triggered all the time while the mouse is outside this area. Any other “Mouse leave” interaction gets ignored as long it is below in the scene graph.

Other ideas which don’t work:

  • Placing areas around the video to trigger on “Mouse enter” to pause. Issue: only the most upper layer can pause a video → only one video can be paused.
  • Working with “While hovering”. Issue: not working with playback. Gets even grayed out.

Are there maybe Plugins or ways to use code to make it work?
Thanks for your feedback!

This topic has been closed for replies.

4 replies

D
  • Daniel113
  • Author
  • April 6, 2023

Found a solution: Using variants of a component. They are smart enough to keep the video state and the “Mouse leave” holdung object can be removed in the non-hovering variant 👍

D
  • Daniel113
  • Author
  • April 6, 2023

However videos in components don’t replay and don’t react on “when Video hits/ends” 😦

Viktor_Lanneld

I have the exact same issue, I even have more than two instances. My expectation of “Mouse leave” is that it should triggered once, when the pointer has been on the element and then exits it. Not that it is triggered all times the pointer is outside.

Could you please explain your solution @Daniel113? I don’t really understand what you did.

D
  • Daniel113
  • Author
  • May 26, 2023

Instead of “Mouse Enter” + “Mouse Leave” on the same object to trigger video-events, I created a component with 2 different video-objects, as 2 variants. “Mouse Enter” switches to the second variant which has the “Mouse Leave” interaction, so when I leave this one switches back to the first variant with the “Mouse Enter” interaction and no “Mouse Leave” interaction is on screen which could get triggered. The second video-object has a checkmark at autoplay, the first hasn’t. That works perfectly and it continues where it stopped and stops where it played to. What dosen’t work are interactions inside the component, which refer to the video. So I can not fast forward, or go back to the start. That only works, if the video is one single object.

Ilakkiaselvan_Subbiah
Viktor_Lanneld
Terms & ConditionsCookie settingsAccessibility statement