Jump to content
Search Community

Question about reverting an animation (again)

mgb test
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

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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.

  • 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.
×
×
  • Create New...