Jump to content
Search Community

Text animation loop visual bug

Aizcream
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Aizcream
Posted (edited)

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 by Rodrigo
CodePen isn't showing
  • Solution
Rodrigo
Posted

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!

  • Like 1

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...