Text Animation Effect

[BebeBabs]

I'm trying to implement a similar scroll animation, such that when each word comes into view, it gets the active styling. can you recommend a plugin to implement this animation of texts

[mvaneijgen]

Hi @BebeBabs welcome to the forum!

 

That is the beautiful thing about GSAP! You can build everything you want, the only thing that is holding you back is your creativity. No more scouring the internet for plugins that do one specific thing. You just need to put in some elbow grease and you can make what every you can think of with GSAP! 

 

We love seeing minimal demos here, so try an make what you want and just post back here when you get stuck and someone will surely be around to help you out. 

 

Focus on one thing at the time, eg moving the text up and down and then try doing the active class. My advice would be just start small and you will see how easy it is!

 

Some great starting points are here:

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

Here is a topic with a similar looking animation, which maybe gets you a jump start, but really I encourage you to jump in and try animating some things!

 

 

[BebeBabs]

Thank you for the nudge!

I have been able to come up with something similar, however, I am having a hard time animating the 3rd colour such that the yellow moves. Right now, it's stuck on a single text. Any idea of what util I might use to resolve this?

See the Pen eYQVMQm by blossom_babs (@blossom_babs) on CodePen.

[Rodrigo]

Hi,

 

The problem here is that you are using the same instance that is moving all the elements up to change the color. You'll need a bit of setup and math in order to get this working, since you need another animation for each element to trigger at a specific moment to change the color of each element.

 

Something like this:

See the Pen qBQxzmO by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!