Jump to content
Search Community

Issue reversing a tween in a loop

bluecube test
Moderator Tag

Recommended Posts

Hello! I'm trying to get a tween to reverse inside a loop that targets multiple elements. When one clicks on a menu item, it opens that menu's next sibling node by tweening the width and once you click the same menu again, it closes by reversing the animation. I'm not sure what I'm missing with the reversing part because it stops reversing once it's inside the 'for loop' on the click to close. Thanks in advanced.

 

 

See the Pen ZEGyZNV by ValerieVal (@ValerieVal) on CodePen

Link to comment
Share on other sites

Hey bluecube and thanks for the clear demo!

 

This is because you are creating a new tween that animates the width to 50% every time. Since the width is already at 50% when the new tween is created, it doesn't do anything. And since the tween is created every time, it's always reversed so it will always play forward and never reverse. Does that make sense?

 

To fix it, move the tween outside of the event listener function:

See the Pen jOPwjME?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
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...