Jump to content
GreenSock

highandover

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

Recommended Posts

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

Link to comment
Share on other sites

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.

 

image.png

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!

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×