Animation repeat delay problem

[Youness-ma]

Hi, I've applied an animation to a list of words within an HTML structure. However, when the animation reaches the last word, there is a 1-second delay before it starts animating the first word again. This delay creates an empty space in the animation for 1 second, how can I remove this delay, so the animation would look like it has no end or start

 

here is my code

const words = [...document.querySelectorAll(".word")];

  const tl = gsap.timeline({ repeat: -1, repeatDelay: 0 });

 

  words.forEach((word: HTMLElement, index) => {

    word.style.position = "absolute";

    const splitTitle = new SplitText(word, { type: "chars" });

 

    tl.from(

      splitTitle.chars,

      {

        opacity: 0,

        y: 120,

        stagger: 0.1,

        duration: 1,

        ease: "back.out",

      },

      "<"

    ).to(

      splitTitle.chars,

      {

        opacity: 1,

        y: -120,

        stagger: 0.1,

        duration: 1,

        delay: 1,

        ease: "back.out",

      },

      "<1"

    );

  });

[Rodrigo]

Hi @Youness-ma and welcome to the GreenSock forums!

 

Maybe this example by @Carl can help:

See the Pen ExVEOPa by snorkltv (@snorkltv) on CodePen

 

He made a blog post and youtube video about this demo as well, where He clarifies every aspect of this concept:

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

Hopefully this helps. If you keep having issues, please create a minimal demo that clearly illustrates the issue you're having.

Happy Tweening!

[Youness-ma]

wow, this is exactly what I was looking for, thanks a lot!

[RobertRobles]

On 10/7/2023 at 4:46 AM, Rodrigo said:

Hi @Youness-ma and welcome to the GreenSock forums!

 

Maybe this example by @Carl can help:

 

 

 

He made a blog post and youtube video about this demo as well, where He clarifies every aspect of this concept:

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

Hopefully this helps. If you keep having issues, please create a minimal demo that clearly illustrates the issue you're having.

Happy Tweening!




Thank you sir for the link, yes it helps me a lot. You made my day and saved my job. I appreciate you for helping me out as well. 

Thank you sir for the link, yes it helps me a lot. You made my day and saved my job. I appreciate you for helping me out as well.