Avoiding "flicker" when showing/hiding element(s) on hover

[highandover]

Hello — sort of new to JS/Greensock but loving what it can do.

 

I am trying to build a megamenu using GSAP. It's fundamentally working as per my Codepen () but there's a slightly annoying "flicking" when moving the mouse from item 1 to item 2 — it's because the megamenu div is hiding and then showing again.

 

Is there a more elegant way I can implement this so avoid the flicker? I've googled a lot but not found a solution.

 

Any help much appreciated.

See the Pen VwxXLrL by highandover (@highandover) on CodePen

[Cassie]

Hey there! So the one way that I can think of is extending out the 'hitbox' of the link so that there isn't any overlapping white space in between them. You could add a styled div inside the link to make it look like there's space between the buttons, but in actual fact the links are pressed right next to each other.

 

The other way would be to show the 'mega-menu' when the UL is hovered, but swop out the content depending on which list item you mouse over. 

Definitely more fiddling around with layout and JS events than GSAP!

 

[highandover]

Thanks @Cassie — I'll look into the solutions you highlighted and see if I can get it working.