Jump to content


Reverse() TimelineMax not working when reusing the timeline inside a function with parameters

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

I am sure this is my ignorance but i am not able to find a solution for this problem i have.
I am trying to play and pause a TimelineMax in a function where i pass parameters on which the animation is happening.

in that function I create a new timeline (as i am using those parameters from function call in timeline, i cant declare it outside the function) which either plays or reverses based on 2 different buttons on my page which pass a Boolean value with the function call.

but the reverse function doesn't work as intended, if this is done as shown in the codepen. but if i keep the if statement -- (which has the play and reverse call) before adding the tweens to the timeline then it works as expected, but that seems like a workaround than a proper solution.
(And yes i am not reversing the timeline before it plays once)


See the Pen eQeGmy by anon (@anon) on CodePen

Link to comment
Share on other sites

First of all, thanks for providing a reduced test case! Very helpful. 


4 hours ago, rhut_tiger said:

(And yes i am not reversing the timeline before it plays once)


It sure looks to me like you are. Your code is building a timeline and then calling reverse() but the playhead is at the very beginning (time:0) at that point, so nothing is really gonna happen if you reverse() it because that just tells the playhead to go back toward the start (...but it's already there in this case). See what I mean? 


Did you want it to jump to the end and reverse from there? You could dl.progress(1).reverse(). Or the super-secret short way is simply dl.reverse(0). ;) 

  • Like 4
Link to comment
Share on other sites

Thank you for the quick reply....... 

ok, so i get your point that everytime the function is clicked its a new timeline so the reverse wont work.
so would your solution work multiple times?
as this animation is a part of content transition, so it should work  multiple time to and fro.


Also, is there a better way of doing this then what i have done?  meaning , is there a better way to use play and reverse when the timeline creation needs variables from function call?

Edit: I tried your solution it works the first time but then goes haywire all the subsequent times, as when the next time this function gets called its play forward and reverse both together, so now i am clueless whats going on.

Edit 2 : Should i use .restart()  instead of .play()  ??

Link to comment
Share on other sites

I read your question and your code several times and I'm kinda lost as to exactly what you're trying to do here. Do you want a single timeline that gets played forward or backward based on button clicks? Or are you literally animating completely different things based on parameters? If so, what do you want to have happen to the "old" (previous) animation in that case? Like...what if someone clicks back and forth really fast? Are you wanting to kill the previous animation and start from totally different values? 


Maybe a reduced test case with just 2-3 boxes that illustrates precisely what you're trying to do would help. I'm pretty sure there's a much cleaner way to code whatever you're trying to do; if I could wrap my head around your goal, I'll be able to tell you better. 


Right now, it looks to me like you risk creating competing tweens, and I have a sneaking suspicion that you coded your tweens in a way that doesn't express what you're truly after (I could be wrong though). There's a mis-match between what you wrote and what you're getting, but I'm seeing the correct behavior based on your code (as far as I can tell at least). 


Side note: you don't need to define an ease in your "from" vars object - that only belongs in the "to" vars. And xPercent/yPercent values should be raw numbers, not strings with percentage signs. GOOD: xPercent:100, BAD: xPercent:"100%". 

  • Like 2
Link to comment
Share on other sites

First of all Thank you ,

Let me explain it better what i am confused about.


(look at the new codepen)

if box 1 is clicked it will go right and box 1 content will be visible, and if box2 is clicked the box 2 content will be visible,

so the variables are the box classes , and only box is visible at one time . So a function passes the variable to be worked on.


in the below codepen,

-each box has content hidden underneath
-on respective box clicks it reveals the content and hides it when clicked again 
- not disabled the other boxclick while one is revealing the content (for the this codepen purpose only, in my case i am disabling that)

now the reverse button doesnt work as intended by me, but its working as it should (
which i dont want),  and so looking for a better solution 

as i am re-declaring the timeline on each click( which is the main issue, i want to pass a dynamic variable but that only can be done if the timeline is inside a function callback as otherwise it will be declared at the time of page load).

so if we use the restart and reverse(0) in JS ( which is commented by me , right now in codepen) then it works as intended, but which i believe is not the right way of doing things (according  to your previous replies)

what i want is as following  (if you un-comment the JS code in codepen you will get the result which i am going for)

1. reverse should animate back to where we started
2. only respective clicked box should have its play and reverse animation 



thank you again , looking forward to a better solution to this ?


See the Pen YRLJwr by rhut-virani (@rhut-virani) on CodePen


Edited by rhut_tiger
Link to comment
Share on other sites

It is still not clear what you are trying to do. But it feels like what you want is, if you click on new box old one should hide the content, Correct?


See the Pen eJONMN?editors=0010 by osublake (@osublake) on CodePen


You can check rest of the demos by @OSUblake in following thread,




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