Jump to content
Search Community

TextPlugin backwards in yoyo

juan-alvarz test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

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 🙂

  • Like 2
Link to comment
Share on other sites

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...