Jump to content
robs

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.

See the Pen VqGROw by rob83 (@rob83) on CodePen

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: 

See the Pen gZdVbL?editors=0011 by GreenSock (@GreenSock) on CodePen

 

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)

 

 

See the Pen yJqQqj by PointC (@PointC) on CodePen

 

 

and a similar approach

 

See the Pen WxgdRz by GreenSock (@GreenSock) on CodePen

 

 

 

 

 

 

  • 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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.