reverse .fromTo plays one more time each time

[eli-ott]

So I have an animation in using a timeline, and I want this animation to be able to be reversed. When I play it normally there's no problem, it's perfect. But when I try to reverse it, it plays one more time each time I play the animation. Here's my code:

const changeBox = (reverse = false) => {
  //not allowing the user to remove the slideshow while the animation is playing
  allow = false;

  changeTl.fromTo('.active', {
    x: 0,
    opacity: 1,
    scale: 1,
    duration: 0.35
  }, {
    x: -500,
    opacity: 0,
    scale: 0.75,
    duration: 0.35
  }).fromTo('.active', {
    x: 500,
    opacity: 0,
    scale: 0.75,
    duration: 0.35
  }, {
    x: 0,
    opacity: 1,
    scale: 1,
    duration: 0.35
  }, '>');

  changeTl.reverse(0);
}

 

I don't know at all what can be wrong since I'm quite new to gsap and still don't know all the details.

 

PS: I tried to recreate it in CodePen, but it does not import the right version of gsap ?

 

Thanks in advance for the help

[Rodrigo]

Hi,

 

Unfortunately there’s not much we can do without a minimal demo.

 

The only thing I can think of with the snippet you posted is that you could be adding new instances to your timeline on each click event, thus generating the behavior you’re describing.

 

Also is kind of weird what you’re describing about codepen. Maybe you can fork this starter codepen in order to show your issue 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[eli-ott]

Here I created a minimal demo with your starter. 

Hope it'll help you understand the problem

 

See the Pen bGmNXLW by eli-ott (@eli-ott) on CodePen.

 

Sorry just saw that the onComplete wasn't supposed to be here at all ?

[eli-ott]

I've just managed to  make it work by changing a bit my timeline like that:

 

const changeTl = gsap.timeline({
  onComplete: () => {
    changeTl.clear();
  },
  onReverseComplete: () => {
    changeTl.clear();
  }
});

 

[Cassie]

Heya! Nice job finding a solution. I'm not sure what the end goal is here, the code you is a little confusing because it looks like a carousel but it's just shuffling two items around, if that's all you want to do it could be best to create the timeline outside the function and then just control it with methods. Then you're not adding to it and don't have to clear anything - that's best practice really.

See the Pen mdzJbNL?editors=0011 by GreenSock (@GreenSock) on CodePen.

If you're looking for a seamless horizontal loop carousel there's a helper function here

https://greensock.com/docs/v3/HelperFunctions/#loop

 

Hope this helps!

[eli-ott]

Thanks a lot for this pen, it'll help me quite a lot!

 

My end goal here is to create a carousel for pictures. But the difficult is to change the image because I firstly Flip the image in this carousel here from another container, so I have to change the element in itself and not just the source.

 

Hope I was clear enough