.reverse() this animation

[Guillaume P.]

Hi Greensock Team,

I would like to reverse this animation without toggle. I used : 

.progress(1)

.reverse();

I also would like to add a delay but it doesn't work. 

Thank's for your help.

See the Pen mdKPqxW?editors=0010 by crankup (@crankup) on CodePen

[Rodrigo]

Hi,

 

Just add a dummy instance at the end of the timeline and use the position parameter:

tl.current = gsap.timeline()
  .to(".box", {
  rotation: 360
})
  .to(".circle", {
  x: 100
})
  .to({}, {}, "+=1") // Delays reverse one second
  .progress(1)
  .reverse();

You can also add a dummy label or a call method to a function that does nothing. The secret ingredient here is the position parameter 👨‍🍳

 

Let us know if you have more questions.

 

Happy Tweening!

[Guillaume P.]

Hi Rodrigo, 

Thank's for delay  tips !

I also would like to keep the "first animation" because, when I add .progress(1) and .reverse(), I only have the reverse animation but not the  "first animation".

For more clarity, I would like the first animation, then one second delay  and then launch the reverse . 

I mean this animation with reverse after one second but without toggle to launch the reverse : 

See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen

Thank's for your help.

 

[Rodrigo]

Hi Guillaume,

 

I read your post a few times and I'm having a few issues trying to grasp the concept, so please bear with me needing a few extra details.

1. You want the animation to have a delay only when you reverse it?
2. What happens if the animation is running when is toggled, there should be a delay as well?
3. You still want the animation to start from the end, like in your first codepen example?
4. You want the animation to start going forward and after it is completed, wait one second and reverse it automatically without a button or a user triggered event?

Please clarify this for me in order to give you the best possible advice.

 

Happy Tweening!

[Guillaume P.]

Hi Rodrigo,

1. You want the animation to have a delay only when you reverse it ?  ==> Yes
2. What happens if the animation is running when is toggled, there should be a delay as well ? ==> No more toggle button
3. You still want the animation to start from the end, like in your first codepen example ? ==> No
4. You want the animation to start going forward and after it is completed, wait one second and reverse it automatically without a button or a user triggered event ? ==> Yes exactly .. this is it !

[Rodrigo]

Hi Guillaume,

 

There are two simple ways to do that using an onComplete callback in your GSAP Timeline.

 

One is to use a GSAP DelayedCall in order to reverse the timeline one second after is completed:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    tl.current && tl.current.progress(0).kill();
    tl.current = gsap.timeline({
      onComplete() {
        // Reverse the timeline one second after is completed
        gsap.delayedCall(1, () => this.reverse());
      }
    })
      .to(".box", {
      rotation: 360
    })
      .to(".circle", {
      x: 100
    });
  }, app);
  return () => ctx.revert();
}, []);

Another is to add the dummy instance at the end (as mentioned in my first post) and then just call the reverse method using the onComplete callback, no need for Delayed Call in this scenario:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    tl.current && tl.current.progress(0).kill();
    tl.current = gsap.timeline({
      // Reverse the timeline once is completed
      onComplete() {
        this.reverse();
      },
    })
      .to(".box", {
      rotation: 360
    })
      .to(".circle", {
      x: 100
    })
      .to({},{}, "+=1"); // Add extra time at the end
  }, app);
  return () => ctx.revert();
}, []);

Yet a third option is to add a repeat and repeat delay to the timeline, with yoyo true:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    // add a box and circle animation to our timeline and play on first render
    console.log("creating timeline");
    tl.current && tl.current.progress(0).kill();
    tl.current = gsap.timeline({
      // Repeat the timeline only once
      repeat: 1,
      // Wait for one second before repeat
      repeatDelay: 1,
      // Repeat from the end to the start (go backwards)
      yoyo: true,
    })
      .to(".box", {
      rotation: 360
    })
      .to(".circle", {
      x: 100
    });
  }, app);
  return () => ctx.revert();
}, []);

As you can see GSAP's API is insanely flexible and you have several options. Just pick the one that better fits your need and go for it.

 

Let us know if you have more questions.

 

Happy Tweening!

[Guillaume P.]

Thank's Rodrigo !