Reversing animation that is on infinite loop

[amit95]

I have a simple logo animation which executes every 5 seconds (for demo purposes).

 

Here's how I'm trying to make the animation work:

 

1. Wait 5 seconds
2. White logo fades out and yellow logo animation executes
3. Then the white logo fade back in
4. 5 second timer resets
5. Back to step 2
6. Repeat

 

I'm essentially after something equivalent to reverse()

 

See the Pen PoexoQY by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi,

 

You don't need a endless loop to achieve that. You just have to add a delay (using the position parameter) to the fade out animation and add a label when the fade out animation starts. Then add a call() method at the end of the timeline that plays the timeline from the label 5 seconds after the final animation:

var logoTl = gsap.timeline();

// initial state
logoTl.set(".tri", {
  scale: 0,
  rotate: "0",
  transformOrigin: "50% 50%"
})
// the animation
.to(primaryLogo, {
  duration: 0.2,
  opacity: 0,
  ease: "power1.inOut"
}, "+=5") // <- Wait 5 seconds in the first run
.addLabel("fadeOut", "<")// <- Add this label when the previous animation starts
.to(".tri", {
  duration: 0.3,
  opacity: 1,
  scale: 1,
  rotate: 0,
  ease: "power1.inOut",
  stagger: {
    amount: 0.3
  }
})
// Call a function that executes the play method from the label we added previously
.call(() => logoTl.play("fadeOut"), null, "+=5");

Check the documentation for the call and addLabel methods:

https://greensock.com/docs/v3/GSAP/Timeline/call()

https://greensock.com/docs/v3/GSAP/Timeline/addLabel()

 

Let us know if you have any question.

 

Happy Tweening!

[amit95]

Hi @Rodrigo,

 

I may have explained it poorly in my question, so apologies in advance.

 

After the yellow logo has animated in, I'm trying to reverse that animation on exit and then fade the white logo back in. So to clarify (as I missed mentioning these details previously):

1. User lands on page and wait 5 seconds
2. The white logo fades out and the animation for the yellow logo animation starts
3. The yellow logo remains visible for 3 seconds
4. The yellow logo animates out the opposite way it animated in (logoTl.reverse())
5. The white logo fade back in
6. 5 second timer resets
7. Back to step 2
8. Repeat

[Rodrigo]

Hi,

 

Just put everything in the timeline going forward and just repeat it. Sometimes in order to make the code look fancier and/or less verbose, we fall into the trap of complicating things too much.

 

This seems to do what you want and I'm positive that it won't cause any major issue:

var logoTl = gsap.timeline({ repeat: -1 });

// initial state
gsap.set(".tri", {
  scale: 0,
  rotate: 0,
  transformOrigin: "50% 50%"
});
logoTl
  .to(primaryLogo, {
    duration: 0.2,
    opacity: 0,
    ease: "power1.inOut"
  }, "+=5")
  .to(".tri", {
    duration: 0.3,
    opacity: 1,
    scale: 1,
    rotate: 0,
    ease: "power1.inOut",
    stagger: {
      amount: 0.3
    }
  })
  .to(".tri", {
    duration: 0.3,
    opacity: 0,
    scale: 0,
    rotate: 0,
    ease: "power1.inOut",
    stagger: {
      amount: 0.3
    }
  }, "+=3")
  .to(primaryLogo, {
    duration: 0.2,
    opacity: 1,
    ease: "power1.inOut"
  });

Let us know how it works.

 

Happy Tweening!