Jump to content


Hover Effect for Sub-Menus

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey there Greensock Guys, I've got a small brainteaser I could use some of your assistance with  :)


So I've got a site with a nav that is using good old CSS transitions to achive a hover effect. I've stripped it back and created a simple copy you can check here:




So in an effort to make the animation accesible across the board (*ahemcough* for older IE browsers) I just tweaked the nav a little and used the GSAP to achieve the same thing:




However when you move the mouse cursor from the menu header or its empty space on to an sub-menu title it's tripping the mouseout function, and there's a slight hiccup in height every time you move to a new list item.

Now I know you typically run into this problem with hovers (as opposed to clicking) and I've managed to get around it for the most part, and I've tried a couple of different approaches - like putting a delay on the mouseout, so when you rollover a sub-menu title the hiccup essentially never happens - but haven't been successful.


Tried to do a bit of digging and homework first, plenty on Flash/AS forums about this, but nothing I could find for JS, appreciate any input you boys can give.



Link to comment
Share on other sites



Well in this cases the greater challenge is in the menu CSS, the GSAP part is incredibly easy.


The thing is that, like you I always worked with <div> elements instead of <ul>, time and experience has led me to learn why does everyone works with <ul>, if it ain't broken don't fix it. Also  I always work with from instances, like that if you change anything in the menu the new height will be respected and you don't have to change the code every time as well.

TweenLite.from(menuElement, time, {height:0});

Like that the element's height is animated from 0 to it's normal value.


Any way I set up a simple codepen based on a menu I did recently for a single page site, feel free to fork and play with it, is an horizontal menu but I think that it shouldn't be much of a difference:


See the Pen Apvag by rhernando (@rhernando) on CodePen




  • Like 1
Link to comment
Share on other sites

Thanks for the great response Rodrigo, and sorry for the delayed reply, had to jump on to some other work.


I totally get what you're saying, and yeah, in normal circumstances I'd be playing around with the css more. Unfortunately I didn't build it, and am not really in a spot to change it too much, am in a position where I don't want to step on another developer's toes (don't laugh). And yes, I do usually prefer animating from instances too, but I find it can get a little confusing when animating certain properties, like opacity i.e. trying to remember which one you set it to in your css file. Same as when you're using CSS animations and keyframes, and you typically set the fill mode to forwards.


Now, I did manage to find a workaround. It doesn't actually solve the problem mind you, so yes, I'm cheating, but I found that when I added some easing - and certain types of easing in particular - it would override or 'delay' the mouseout, so there's no judder or stuttering effect each time you mouse over one of the sub-menu titles. I updated the second test above to show you what I mean, have a look here if you like:




I know, it's not a proper solution, but it works  :P


Thank you for creating the example pen, very sporting of you. The JS seems pretty detailed for just a simple menu hover, but I really like what you've done with it, very robust.


Thanks again :)

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.