Show submenu on menu hover, keep it open while hovering the submenu area

[Hy-digital]

Hey GSAP!

 

We're working on rebuilding our website using Vue and GSAP (love the framework <3) and I've stumbled onto an issue.

 

I feel a little dumb having to ask for help regarding this but I'd like to get over it! 

 

I have a vertical full screen nav that when hovered, opens up a sidenav area with sub-items. The issue I'm stuck on is that I'd like the submenu to stay open when it is hovered so users can click on the sub-items. I've tried a number of approaches but nothing seemed to work, so I'd like to ask you guys for help!

 

I've tried changing the event handler to

 

//create the event handler
            $(el)
                .on("mouseenter", function () {
                    //this.style.willChange = 'transform';
                    this.animation.play();

                });
			$(".subnav").on("mouseleave", function () {
                    //this.style.willChange = 'auto';
                    this.animation.reverse();

                });

or

 

//create the event handler
            $(el)
                .on("mouseenter", function () {
                    //this.style.willChange = 'transform';
                    this.animation.play();

                });
			$(".sub-item").on("mouseleave", function () {
                    //this.style.willChange = 'auto';
                    this.animation.reverse();

                });

Attaching codepen url with a simple version for reference.

 

Thank you in advance!

 

 

EDIT: this seems to be working but its behaving very inconsistently, sometimes not working as expected while other times it works fine.

 

$(el)
                .on("mouseenter", function () {
                    //this.style.willChange = 'transform';
                    this.animation.play();

                }).on("mouseleave", function () {
                    //this.style.willChange = 'auto';
                    this.animation.paused() ? this.animation.play() : this.animation.reverse();
                });

          $(".sub-item")
                .on("mouseenter", function () {
                    el.animation.play();
                })
                .on("mouseleave", function () {
                    el.animation.paused() ? el.animation.play() : el.animation.reverse();
                });

EDIT2: I added console logs on the event and it looks like the sub-item hover triggers three times both on enter and leave. It does seem to be working the way I need it to at the moment, but again the behaviour seems inconsistent and sometimes the sub menu will not close when hovering out or over another menu item.

See the Pen MWjoKLB by alexkidoo (@alexkidoo) on CodePen

Edited December 18, 2020 by Hy-digital
added more context

[ZachSaucier]

Hey Hy-digital and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership!

 

The core of your issue is that you are trying to animate all of the sub-menus every time any menu-item is hovered. That's one of the most common GSAP mistakes. Instead of doing that, you should make sure that each menu only opens the relevant sub-menu. You also need to make sure to close any previously open sub-menu. There are various ways you could structure that sort of thing. One is to use IDs or something similar to tell which sub-menu a menu-item should open. Another way is to restructure your navigation to make sure that the sub-menu is a child of the relevant menu-item. I prefer the restructured HTML approach because I think it makes the logic of the event handlers easier. You can see that it's the method we chose for the sub-menu in our navigation under "Products". 

 

Another issue is your logic in your event handlers, but how to fix that depends on your approach you decide on from above.

 

There are a fair many examples and tutorials of how to create a sub-menu out there. Perhaps it'd be easiest to find one that creates an effect similar to what you're wanting and then adjusting it to work with a GSAP animation  

 

Side notes:

• You don't need the new before gsap.timeline().
• display isn't a valid value for will-change. Maybe you wanted to have opacity or transform, opacity instead? You probably also want to set this value before your animation (like in the CSS) instead of putting it in the timeline.

[Hy-digital]

On 12/18/2020 at 8:58 PM, ZachSaucier said:

Hey Hy-digital and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership!

 

The core of your issue is that you are trying to animate all of the sub-menus every time any menu-item is hovered. That's one of the most common GSAP mistakes. Instead of doing that, you should make sure that each menu only opens the relevant sub-menu. You also need to make sure to close any previously open sub-menu. There are various ways you could structure that sort of thing. One is to use IDs or something similar to tell which sub-menu a menu-item should open. Another way is to restructure your navigation to make sure that the sub-menu is a child of the relevant menu-item. I prefer the restructured HTML approach because I think it makes the logic of the event handlers easier. You can see that it's the method we chose for the sub-menu in our navigation under "Products". 

 

Another issue is your logic in your event handlers, but how to fix that depends on your approach you decide on from above.

 

There are a fair many examples and tutorials of how to create a sub-menu out there. Perhaps it'd be easiest to find one that creates an effect similar to what you're wanting and then adjusting it to work with a GSAP animation  

 

Side notes:

• You don't need the new before gsap.timeline().
• display isn't a valid value for will-change. Maybe you wanted to have opacity or transform, opacity instead? You probably also want to set this value before your animation (like in the CSS) instead of putting it in the timeline.

Hi Zach,

 

I think you're absolutely right. I got too caught up in the easy (and lazy) way to do it.

 

I'll go back to my original design and as you recommended, I will restructure the HTML to only bring up the relevant sub-menus when needed.

 

Thank you for the support and I'm looking forward to sharing our website here once it is done!

 

Solved!