Aizcream Posted May 6 Posted May 6 (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 May 6 by Rodrigo CodePen isn't showing
Solution Rodrigo Posted May 6 Solution Posted May 6 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! 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now