Jump to content
Search Community

Hover animation with reverse on mouse out event issue

Roman Kovalev
Moderator Tag

Go to solution Solved by Jonathan,

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

Roman Kovalev
Posted

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.

  • Like 1
  • Solution
Posted

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 :)

  • Like 5
  • Thanks 1
Roman Kovalev
Posted

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

  • Like 2
  • 3 years later...
Posted

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

 

 

Posted

@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();
    });

 

  • Like 1
Posted

@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?

Posted
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();
});

 

  • Like 1
  • Thanks 1
Posted
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!

  • Like 1

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.
×
×
  • Create New...