Interaction trouble - hover/move in - can't stop quick flashes

Design help Animations & Interactions
1

I’ve made an interaction where when you hover over a div, another one slides on top of it, then slides away when you hover out.

I’ve been able to do it, however I can’t stop the quick ‘flashing’, which makes the interaction seem buggy. Any suggestions/ help would be much appreciated!

Here is my read only link. - it’s on the home page, the first three grey divs held in columns

Thanks in advance!

2

Hi @livstrawbridge,

The problem is that while you hover over one element, you trigger an interaction, and the interaction covers the DIV with a different DIV. This way, the pointer is no longer over the trigger DIV, so the ‘Hover Out’ interaction is triggered, and then the grey DIV moves away, so you hover again over the initial trigger… and so on…

One solution for this would be to place the ‘Grey Div’ inside the ‘Slide Div’, so when the pointer is hovering over it, you still trigger the initial interaction (since it is a decedent of the trigger).

3

Thank you for explaining that well @avivtech, I made the changes and now it works perfectly, only I put the ‘Slide Div’ in the ‘Grey Div’ instead :).

Thanks again for your help!

1 Like