Hover animation with reverse on mouse out event issue

[Roman Kovalev]

Hello, there. 
Making a very simple hover effect with GreenSock and faced the issue I can not explain (maybe experience is not enough). 
I have a menu bar and with a hover I'm showing the sub menu options. When mouse is out - reverse the animation.
But the animation is not happening again. Why ? What am I missing ?

See the Pen xROmJj by NeedHate (@NeedHate) on CodePen.

[Jonathan]

Hello NeedHate, and Welcome to the GreenSock!

 

It looks like you were triggering a timeline to play and then immediately restart it. Its better to just create one timeline for each element and then simply play and reverse the animation.

 

When applying a timeline to multiple elements its best to just create a timeline in a paused state. And then in the loop store the timeline in each DOM node. This will associate each timeline with that element that is hovered. Then play on rollover and reverse on rollout.

 

See the Pen ZBBrRv by jonathan (@jonathan) on CodePen.

 

You can see other examples below that apply timeline to multiple elements inside a loop

 

http://codepen.io/jonathan/pen/KdYqWo

 

http://codepen.io/jonathan/pen/rOgVEd

 

Hope this helps, Happy Tweening

[Roman Kovalev]

For each element it... Haven't even thought about that! Brilliant! Thanks, you made my day.  

[Alexyn0o]

Greetings Greensock wizards,

 

I want to say thank you for the code demonstration, I have tried this on my menu, and it works!

Only one problem I can't seem to figure out is how can I cancel the hover animation over the overflow:hidden element and just trigger it on the menu icon only?

 

Currently If the hidden area is hovered the animation will start and items will slide in, I need this to happen only on when hovering the icon...

This may be a css problem if not a gsap one, I'm a newbie and I don't know how to achieve this the best way possible...

 

See the Pen NWxPgpK by designismore (@designismore) on CodePen.

 

Anyone want to help?

Thanks

 

 

[AsKadir]

@Alexyn0o Hey!

Not sure why in demos this line is used:

this.animation = tl;

But for your simple example you can remove it and in last code lines change this:

    $(el).hover(function() {
        //animation_init($(this).find('.menu-v'), $(this).find('.menu-v > li'));
        this.animation.play();
    }, function() {
        this.animation.reverse();
    });

to this and that's it:

$(".just-a-menu-icon").hover(function() {
        //animation_init($(this).find('.menu-v'), $(this).find('.menu-v > li'));
        tl.play();
    }, function() {
        tl.reverse();
    });

 

[Alexyn0o]

@AslanGoi Thank you... close but not quite the desired outcome...

 

The menu items should stay open when I move the cursor on one of them (and only on mouseleave they should close), in this case you suggested the moment the mouse leaves the menu icon the animation closes (reverses). Not what I was expecting.

 

Any new ideas?

[AsKadir]

13 hours ago, Alexyn0o said:

The menu items should stay open when I move the cursor on one of them

@Alexyn0o Oh, sorry! I didn't notice this, you can do it like this:

$(".just-a-menu-icon").on("mouseenter", function() {
    tl.play();
});
$(el).on("mouseleave", function() {
    tl.reverse();
});

 

[Alexyn0o]

29 minutes ago, AslanGoi said:

@Alexyn0o Oh, sorry! I didn't notice this, you can do it like this:

$(".just-a-menu-icon").on("mouseenter", function() {
    tl.play();
});
$(el).on("mouseleave", function() {
    tl.reverse();
});

 

Thanks man! This and a little bit of css adjusting did it. I'm embarrassed for asking help when it wasn't even a gsap problem... lol.

Anyway I appreciate it!