Video flashing between hover blocks

[Mattrudd]

Happy Monday folks.

I've cobbled together a kind of navigation grid, whereby videos are played in a preview box - each video corresponding to the hovered block via a data attribute.



The problem I'm having is I can't figure out how best to prevent the 'base video' flashing into view if the user moves the cursor quickly from one video trigger block ('core-skills__blockChild') to an adjacent one - behaviour that's highly likely of course.

Understand this is more of a logic problem but thinking my issue could be fixed with some clever GSAP position parameter usage. It's bound to be a simple fix I'm not seeing - of setting up a timeline delay or some kind of flag system so the base video only shows if the cursor settles for more than a second or so between hover blocks. I've been staring at it long enough to be missing the obvious I think 😵‍💫

One easy solution would be to only trigger the return to playing the base video once the cursor has left the block containing the hover blocks - but I'd like to have it a bit more finely tuned in case the cursor settles in the column/row spacing between hover blocks.

As ever, hope what I've described makes sense!

See the Pen BaEPeYQ by matt-rudd (@matt-rudd) on CodePen

[Rodrigo]

Hi,

 

I'm far from being an expert in CSS grid but I believe the problem here stems from the fact that the gap between the elements, given by the margin bottom property they have, just triggers the mouse leave event. What you could do is add an extra element and give that element some padding bottom instead of the margin bottom and add the colored elements inside this parent. With that you can trigger the mouse enter/leave events in that parent.

 

Is worth noticing that even with this approach the mouse leave element will trigger before the mouse enter one on the next element as you can see in this fork:

See the Pen oNOPxdr by GreenSock (@GreenSock) on CodePen

 

Unfortunately I don't have time right now to create a fully working solution for you, especially since this is mostly a JS logic issue and not really a GSAP related one and we aim to keep these free forums focused on GSAP related issues.

 

There are definitely other options, for example my approach would be to show/hide the base video with the letters by triggering the mouse enter/leave events on each column and not each block and use the blocks to show/hide the corresponding videos for each one. IMHO that is the simplest approach here.

 

Hopefully this helps.

Happy Tweening!