Question about reverting an animation (again)

[mgb]

Hi devs,

 

I am pretty sure how reverse() works but i can't get it to work in this context (see codepen).

 

I need to construct the animation in another file and import it to another file and run it. I should be able to control if I want it to go forward or reverse from the init file so I have added "playReversed" as a parameter and want to control the animation by adding true or false.

This basic codepen should give you the idea. If you look in the console you can see the statements is correct. But the animation won't work.

Any ideas? 

See the Pen yjMWLy?editors=1111 by grandorf (@grandorf) on CodePen

[PointC]

You're creating your timeline in your runAnimation() function each time you click. Create the timeline outside of that function and I think everything should behave as you expect. 

 

Happy tweening.

 

[mgb]

Thanks!

It works when the timeline is constructed outside the function as you suggested. However, why wouldn't it work? I can see it's bad practice to create the timeline again and again, but I don't see why it should not work...

[PointC]

When you create a timeline and tell it to reverse before its been played, it has no place to go. Your demo would have worked if you reversed from the end of the timeline like this:

tl.reverse(0);

 

But even that would have started getting messed up quickly with tween overwrites and everything would have been out of position. It's always better to create the timeline once and then control it in your functions and event handlers.

 

Happy tweening.

 

[mgb]

@PointC Thanks maybe I didn't knew how reverse() worked after all 
But changing  tl.reverse() to tl.reverse(0) in my example still doesn't make it work. 

Should i use reversed() or something else if I wanted my example to work?

[Dipscom]

Hello!

 

Time for the "early morning shift crew" to chime in.

 

This might look a pretty simple setup but there are a few tiny nuances that might make the logic a bit brittle here.

 

Let's unpack the instructions for the browser.

 

-------------------

Case 1:

User: Click 1 - "Play"

- GSAP, create a Timeline that moves the elements to x:500.

- Timeline, play.

 

Timeline: "Ok, let's go", * Elements move to x:500 *

WORKS

-------------------

 

-------------------

Case 2:

User: Click 1 - "Play reverse"

- GSAP, create a Timeline that moves the elements to x:500.

- Timeline, reverse.

 

Timeline: "Ok, let's go", "hum... I'm aready at the start. No need to go anywhere".

DOESN'T WORK

-------------------

 

The solution to case two would be to tell the timeline to go to its end before reversing it.

 

tl.progress(1).reverse();

 

But that alone brings other problems.

 

-------------------

Case 3:

User: Click 1 - "Play reverse"

- GSAP, create a Timeline that moves the elements to x:500.

- Timeline, go to your end and then reverse.

 

Timeline: "Ok, let's go", * Elements jump to x:500 *. * Elements move to x:0 *

WORKS

-------------------

 

-------------------

Case 4:

User: Click 1 - "Play reverse"

- GSAP, create a Timeline that moves the elements to x:500.

- Timeline, go to your end and then reverse.

 

Timeline: "Ok, let's go", * Elements jump to x:500 *. * Elements move to x:0 *

 

User: Click 2 - "Play"

- GSAP, create a Timeline that moves the elements to x:500.

- Timeline, play.

 

Timeline: "Ok, let's go", * Elements move to x:500 *

WORKS

-------------------

 

-------------------

Case 5:

User: Click 1 - "Play"

- GSAP, create a Timeline that moves the elements to x:500.

- Timeline, play.

 

Timeline: "Ok, let's go", * Elements move to x:500 *

 

User: Click 2 - "Play reverse"

- GSAP, create a Timeline that moves the elements to x:500.

- Timeline, go to your end and then reverse.

 

Timeline: "Ok, let's go", * Elements are at x:500 *. * Elements don't go anywhere *

DOESN'T WORK

-------------------

 

And I could go on, and on, and on... With the many little variations on which order you click the buttons. They will break in several places.

 

There are ways to get around that but it boils down to how much flexibility you want/need. The best way is to do what @PointC has suggested and have initialization separated from the control of the timeline. You can just initialize everything at the booting of your page/application and after that, only trigger the play/reverse.

 

Another way is to set the start and end position of said animation with .fromTo() if you know where the tweens will always start and end.

[mgb]

Wow this was very helpful @dipscom! Thank you so much for that explanation.

[PointC]

So I guess this means @Dipscom is alive and well? Welcome back.

 

I thought perhaps you had written some amazing code, sold it to a mega-corp and retired to a tropical island somewhere. 

[Dipscom]

Alive? We can say so.

 

Well? I shall look for the future before answering this one.

 

Not quite out of the woods yet but getting there.