Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
synthwavenomad

Is it possible to reverse timeline tweens all at once?

Go to solution Solved by GreenSock,

Recommended Posts

Hey Fellow GSAP'ers!

I was wondering if it is possible to play a timeline with multiple tweens through normally but then on click for example reverse the timeline but reversing all the tweens simultaneously so I don't have to wait for the lengthy timeline to reverse through?

I can create a CodePen if needed but I am hoping this is a simple question someone will be able to call me a plonker for. ✌️

Link to comment
Share on other sites

Can you provide a simpler example? I wanna help before I sleep hahha.

  • Like 1
Link to comment
Share on other sites

@Xenex122 Sure here is a little CodePen 

See the Pen GRQYoJO by StartCatalyst (@StartCatalyst) on CodePen

.

So basically you will see the tweens execute in order as expected. But I would like on button click to reverse all the tweens at the same time not in order if that makes sense?

Link to comment
Share on other sites

9 minutes ago, synthwavenomad said:

@Xenex122 Sure here is a little CodePen 

.

So basically you will see the tweens execute in order as expected. But I would like on button click to reverse all the tweens at the same time not in order if that makes sense?

 

If you don't want to animated it by reversing 

demoTL.reverse(-1);


 

Link to comment
Share on other sites

And if you want to animated it 
 

 demoTL.to("div", { x: 0 });

but in reversed do this thing. This one looks more cleaner than the first one I posted. 

Additional just make sure this "div" has a parent just to avoid errors in animation.

Hope you like it goodnyt @synthwavenomad

Link to comment
Share on other sites

@Xenex122 Thanks for your quick responses but this still isn't unfortunately what I am after as I do want them to animate, just simultaneously.

And the second option isn't ideal either as it may get messy when playing around with the timeline, I am sure there must be a way to reverse all tweens at the same time on a timeline.

Link to comment
Share on other sites

5 minutes ago, synthwavenomad said:

@Xenex122 Thanks for your quick responses but this still isn't unfortunately what I am after as I do want them to animate, just simultaneously.

And the second option isn't ideal either as it may get messy when playing around with the timeline, I am sure there must be a way to reverse all tweens at the same time on a timeline.

I don't understand ?? You are asking reversing it simultaneously which basically what the animation doing. Perhaps you are expecting a different function of codes?  Have you tried the codes first?

Link to comment
Share on other sites

Hey there @synthwavenomad - welcome to the forums ☺️

Are you aiming for all the boxes to animate at the same time back to the beginning?

When it's on a timeline a tweens playhead is always controlled by the parent timeline, I haven't stumbled across this need before, but a solution could be to add the tweens to a new 'reverse' timeline, position them all at the start and then reverse that one?

Feels a bit hacky but it works

 

See the Pen PoQyZyx?editors=1011 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Also thanks for being part of Club GreenSock we always appreciate the support 🥳

Link to comment
Share on other sites

Just a note that if the timeline is halfway through when it's clicked it's not going to animate from those states, it'll jump to the end state and then animate back.

With that in mind, and with the specific example of three boxes - I would definitely do what @Xenex122 suggested so that the tweens animate from wherever they currently are to x: 0 But I can understand that would be frustrating if you have a lot of different tweens with loads of different starting values.

 

Maybe @GreenSock can shed some light on what he would do in this situation.

 

30 minutes ago, Xenex122 said:

And if you want to animated it 
 

 demoTL.to("div", { x: 0 });

 

 

 

Link to comment
Share on other sites

@Cassie Thanks Cassie! I've seen some of your quick twitter vids demo concepts from GSAP v3.0 - big fan! 😀

That's definitely an interesting work around. Definitely something I can play around with.

 may not even be using Greensock correctly in its application but what I am trying to do is:

  • onclick of a container, add and animate an image where I click to a max of 5 (I have this part down)
  • Then on click of over 5, remove the first in the array and animate in a new one, creating a new array (Also good so far)
  • Finally if I click a clear button to clean the images off the page, I want to remove them all at the same time.

I am certain there is a creative solution to this, I just wondered if there was some functionality I wasn't aware of, whereas I could reverse all tweens on a timeline simultaneously. I have actually come up against this problem a couple of times - maybe just me being lazy and wanting to write less code. 😅

I can always create a more comprehensive Codepen if needed. ✌️

  • Haha 1
Link to comment
Share on other sites

  • Solution

Obviously if you reverse() the timeline, that honors all of your timings/spacing but if you want to shift things around and force them to run simultaneously, you have a few options:

  1. The more common approach is to just create new tweens to animate things back to whatever you want. No worrying about re-nesting animations, inverted easings, etc. I find this cleaner most of the time, especially because it give me better control of the easings/timings. I'll often want things to go slightly faster, for example, back to their initial states.
  2. Or you could pop the animations out of the timeline, drop them onto the global timeline and reverse() them one-by-one but of course all your easings will be inverted too (maybe you want that). This works fine if you do it mid-tween(s): 

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

Does that help?

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Ahhhh global timeline of course - wonderful. I was trying to figure out how to 'pop them out' but got stuck and went with another timeline.

 

Thanks Jack!

  • Like 2
Link to comment
Share on other sites

Hi @GreenSock, thank you for your detailed response with a couple of approaches. Definitely gives me some food for thought and I haven't heard of the global timeline before, GSAP is always full of surprises!
 

Hopefully this thread will help others in the future and thank you to everyone for their help & support. 😃

  • Like 2
Link to comment
Share on other sites

Thanks for popping back with such a nice message! Come back anytime.

  • Like 1
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.
×