Text animation loop visual bug

[Aizcream]

Hola chicos, tengo un problema con esta animación de bucle, todo funciona bien pero antes de que termine la animación, la primera palabra se muestra nuevamente, ¿podrían decirme por qué sucede esto?

---------

Hi Guys, I have a problem with this loop animation, everything works fine but before the animation's end, the first word is shown again. Can someone tell me why this happens?

See the Pen azzKBxp by Juan-David-D-az-Ram-rez-the-encoder (@Juan-David-D-az-Ram-rez-the-encoder) on CodePen.

Edited May 6 by Rodrigo
CodePen isn't showing

[Rodrigo]

Hi @Aizcream and welcome to the GSAP Forums!

 

Basically because of this logic in your code:

const next = texts[(i + 1) % texts.length];

Right now you have 3 elements so this value (i + 1) % texts.length returns 0 for the last element so you get this:

// i is the index of the loop
console.log(i, (i + 1) % texts.length);

// 0 1
// 1 2
// 2 0

So in the final run of the forEach loop the next element is the first one. On this cases you should use conditional logic and animate the next element only if it exists:

const amount = texts.length;
forEach((text, i) => {
  const next = texts[i + 1]; // Undefined for the last element
  if (next) {
    // Animate the next element only if it exists
    // This block will not run on the last iteration of the loop
  }
});

This part doesn't make a lot of sense to me, TBH:

texts.forEach((el, i) => {
  tl.set(texts[0], { x: "0%", opacity: 1, scale: 1.5 });
  tl.to(texts[0], {
    scale: 1,
    x: "0%",
    opacity: 1,
    duration: 0.5,
    ease: "power2.inOut"
  });
  //...
});

Why are you setting and animating the first element on every loop run? This should be enough to ensure that the first element is visible:

tl.set(texts[0], { x: "0%", opacity: 1 });

texts.forEach((el, i) => {
  // ...
});

Also this tutorial by @Carl shows a great way to achieve this type of effect in a far simpler way (be sure to watch the Youtube video as well):

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

 

Finally I translated your thread, while I'm a native Spanish speaker not a lot of folks around here would be able to understand you without a translation tool, so please make an effort to post your questions in english, that also helps other users that might struggle with an issue similar to your's in the future.

 

Hopefully this helps

Happy Tweening!