Jump to content
Search Community

Mouseleave reverse not working after click

mikeebee test
Moderator Tag

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

Hi all, 
New to Greensock so bear with me :)

I've created a sidebar which is hidden, when you mouseenter the sidebar, it fires TimelineMax to animate the sidebar open. When you mouseleave it reverses that timeline.


This works great. If you hover over the sidebar, even erratically, it behaves as expected. Now, I have a nav item inside the sidebar which, when clicked, fires another timeline which opens a full page subnav. 


I set a variable to say this subnav is open so I can keep the sidebar open. So the reverse will only run if the subnav is closed.


If you hover the sidebar and click the button (looks like a little bottle) a full page colourful nav will appear. If you keep you cursor over the button, click it again (to close the colourful nav), then mouseleave the sidebar, it reverses as expected.


If you...


  1. Hover the sidebar
  2. click the button
  3. mouseleave the sidebar to interact with the colourful nav
  4. then go back to the sidebar to click the button again to close the nav
  5. THEN mouseleave


The sidebar should close but it remains open, the timeline doesn't reverse. All the variables seem correct so I'm stumped!


I hope this makes sense, I've tried to explain it as best I can. See the Codepen for the working code.


Many thanks!

See the Pen waMOoj?editors=001 by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Great demo. 

Thanks for taking the time to put it together and especially for the clear console.log()s. Very helpful.



As your logs showed, the timeline was reversing as the callbacks were firing, you just weren't seeing any animation.


The reason is as follows.


You were creating new (additional) sidebarTl timelines on every mouseenter which would bring $el.sidebar to x:0

The problem is that if the sidebar is open and you mouseenter again, you create a new timeline which tweens to x:0, but since the x is already 0, you are creating an animation from x:0 to x:0 (no change in values). So when you reverse the timeline there is nothing to see.


In cases like this, I think you will do fine to create your sidebar timeline once and then just tell it to play() and reverse() when necessary. 


I very quickly hacked up your nice clean code just to show you how to create the timeline once




Make sense?

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