Animation with 3 iterations, Add different animation on third iteration

[Adel Kamel]

Hello everybody,

I hope you're doing well, sorry for my english.

 

I didn't found any solution to achieve that.

I have an animation that loops 3 times.
At the last iteration, I need to add a variant so that the text is always visible.

Thanks for your help

 

See the Pen poQPRLa by adelarmis (@adelarmis) on CodePen

[Rodrigo]

Hi,

 

You can use a call() method instead of the to method and check the current iteration of the timeline:

const timeline = gsap.timeline({ repeat: 2, repeatDelay: 2 });

timeline
  .to(visual, { left: 0, opacity: 1, duration: 1, delay: 0.5 })
  .to(visual, { left: -277, opacity: 0, duration: 1, delay: 4 })
  .to(square, { opacity: 1, stagger: 1 })
  .call(() => {
  if (timeline.iteration() < 3) {
    gsap.to(square, {
      delay: 2,
      opacity: 0,
      duration: 0.2
    });
  }
})
  .to(
  {},
  {
    delay: 2,
    duration: 0.2
  }
);

Here is a fork of your codepen:

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

 

Finally is worth noticing that you are using a version of GSAP that is a bit outdated: 3.10.4, we're currently at 3.12.2 which should work in the same way, so I would recommend that you update it.

 

Hopefully this helps.

Happy Tweening!

[Adel Kamel]

Many thanks for your reply