Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Roman Kovalev

Hover animation with reverse on mouse out event issue

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

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
Link to comment
Share on other sites

  • Solution

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
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 3 years later...

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

 

 

Link to comment
Share on other sites

@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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
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.
×