Reverse Function Not Working As Expected

Recommended Posts

I have a Dropdown Navigation with sub-menu-points that are revealed on click.

For this I created a timeline with 2 tweens:

  1. A tween that changes the height and opacity of the next menu points
  2. A tween that animates the menu points from left to right.


The forward animation works fine but the reverse function only reverses the second tween — however without any animation. The first tween isn't reversed at all.


Any idea on what I did wrong?


Thanks so much.

Share this post

Link to post
Share on other sites

Hi and welcome to the GreenSock forums. 


Thanks for the demo.


The biggest problem is that you create a new timeline on every click. 

Please see the console logs in this demo: 


If the menu is already open, there is no need for a new timeline. 

You really want to reverse the timeline that was created on the previous click, not one that was just made.


There are a few ways to go about this, but your end result needs to be that each menu has a reference to its own animation that it is in charge of playing or reversing. 


Probably the best approach to this setup is what @OSUblake does in this thread 



This version from @pointC may be a little easier to understand (you would have to change the interaction to be click-based of course)





and a similar approach








  • Like 4

Share this post

Link to post
Share on other sites

This was the hint I needed.

Thanks so much, Carl!

  • Like 1

Share this post

Link to post
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.