TextPlugin backwards in yoyo

[juan-alvarz 3 Likes (Newbie)]

Hello dear team of GSAP, since I met GSAP I have not stopped using it in my projects, and it has helped me a lot, what I have found in the forums has been enough to get out of the problems I've had, except for this one.


I am using GSAP with Next, I have an animation that I want to make, similar to this one: 

happens, that once finished, that is, in an onComplete of the yoyo, I want it to change the text for one of those that I have in an array, i'm using useState for it, and it don't work, the question is

How can I make a similar effect that change text inside of array in a yoyo property?, thanks

 

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

[Rodrigo 5,087 Likes (Superhero)]

Hi @juan-alvarz and welcome to the GreenSock forums!

 

That shouldn't be too hard to tackle. I forked that codepen and added more texts so you can see it:

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

 

When working with React we strongly recommend using GSAP Context in order to have an easy time with scoping and cleaning up:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also is a good idea to take a look at this article:

 

Finally we have a collection of starter templates for using GSAP in a Next app:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Let us know if you have any questions.

 

Happy Tweening!

[juan-alvarz 3 Likes (Newbie)]

I'm very  happy! right now  
it is very frustrating when you see your code more than 100 times and you don't find the fault, I have to say that in your answer it was only missing a loop without end, I just added it and it was like this, I hope this will also help someone else who needs it.

See the Pen zYLEYEZ by juan-alvarz (@juan-alvarz) on CodePen

simply added

gsap.timeline({
  repeat:-1,
  repeatDelay:1,
  yoyo: true
})

with this the animation continue without end

Thanks Rodrigo, you're my hero 🙂