reverse not working

[louise000]

Hello, I'm trying to create the sketch shown in the demo with a very simple timeline that is activated on a button click and then reverses.

 

The reverse command does nothing as far as I can see.

 

I tried to do the same thing here without any buttons, but reverse also does not work here

See the Pen GRxJXPW by louise-temple (@louise-temple) on CodePen.

 

What am I missing?

 

See the Pen VwXLGxv by louise-temple (@louise-temple) on CodePen.

[mvaneijgen]

You've created a timeline, but the problem is you're not using it. Your timeline is called `myAnim`, but you keep calling `gsap.to()`. You should be calling `myTL.to()`.

 

The problem with your case is that there are new img created on each click, so you need to get these new img each time. This example creates a timeline each time the function runs.

 

See the Pen NWYqEyG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

Here is one that doesn't use a timeline and will animate all the just with a gsap.to() tween

See the Pen MWVwzQp?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

 

 

For good measure here is the first pen using the timeline you've created

See the Pen mdxJQGZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[louise000]

Thank you! Ach I can't believe I didn't notice that I was writing the tween to gsap instead of my variable.

 

There is a related problem though, why can I not get it to play first and then reverse?

 

See the Pen VwXLGxv?editors=1010 by louise-temple (@louise-temple) on CodePen.

 

[SteveS]

In the slideDown function:

myAnim.play().then(() => myAnim.reverse(0));

[louise000]

Thank you!

 

I guess when I read the documentation for the timeline .reverse method, when it said

 

//reverses playback from the very END of the animation:
tl.reverse(0);

I thought it would trigger the reverse at the end of the play just by passing "0".

 

 

////

 

I'll just leave this code snippet here for any other newbies who are still figuring out arrow functions.

function slideDown(){
  let myAnim =  gsap.timeline()
  let balloon = document.querySelectorAll("img")
                myAnim.to(balloon, {y:200, stagger:0.2});
  myAnim.play().then(myReverse);
  
  function myReverse(){
    myAnim.reverse(0);
  }
}

 

[GreenSock]

Are you aware that you can just set repeat: 1, yoyo: true if you want it to play forward once and then backwards to the beginning? And since you're only doing one tween, you don't even need a timeline at all - you can greatly simplify your code to: 

 

function slideDown(){
  gsap.to("img", {y:200, stagger:0.2, repeat: 1, yoyo: true});
}

Does that help?

[louise000]

Thank you! I think this will help someone! 

 

In my case, this time, I am setting up this specific structure so that I can populate it with more complex timelines but I always really appreciate to see the brevity of thinking of more senior developers, thank you!

[GreenSock]

7 minutes ago, louise000 said:

I am setting up this specific structure so that I can populate it with more complex timelines

That's no problem:

let tl = gsap.timeline({ repeat: 1, yoyo: true });
tl.to("img", {y:200, stagger:0.2})
  .to(...)
  .to(...)

Have fun!