text highlight effect on scroll

[michael_feh]

hey there,

 

i just started messing around with gsap and scroll trigger and im already loving it.

i need some effects for a website and almost got everything running with gsap and ScrollTrigger except for this one effect.

 

you can see it in action here:
https://www.nembodesign.com/

its this font color changing effect on scroll of the first paragraph "We know that developing a new project is a complex..."
I think you would have to split the text into characters with SplitText and animate the color with gsap.to + ScrollTrigger + scrub.

But i cant find a way to animate all characters individually based on the scroll position of the paragraph.

Does anybody know how do do this?

Kind regards,
Thanks in advance,

Michael

 

[PointC]

Hi @michael_feh

 

Welcome to the forum.

 

We've had a few threads about that effect and you're correct - it's pretty easy with SplitText. Here are a couple demos I posted as answers for one of the older threads. They should point you in the right direction.

 

See the Pen MWQJWqJ by PointC (@PointC) on CodePen.

 

See the Pen NWybQow by PointC (@PointC) on CodePen.

 

Happy tweening and welcome aboard.

  

[michael_feh]

❤️

[Rodrigo]

Hi,

 

Here is another approach:

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

 

Happy Tweening!

[michael_feh]

@Rodrigo even better. becuase the letters actually change colour as in the example.
is it even possible to change the color twice to generate a fade/blend effect? 
would i need to have various ".set"s or what would be the right approach?

also, if i get the pricing right: to use split text on a production site is 149$/y, right?

[Rodrigo]

Hi,

 

Sure thing GSAP Timelines are super flexible:

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

 

Thanks for considering joining the GSAP Club! That amount ($149 per year) gives you access to every update for the bonus tools for that amount of time. Also you can use every bonus tool on all the sites/apps you want, there is no limit on that. Our tools don't have a phone home code in them, we base our entire business model on the honor system, so once you deployed something with the bonus stuff on a site it will stay there as long as you/your client wants. But if at some point a bug shows up and your Club membership is not renewed, you just won't get access to the necessary update. If no bug shows everything will just keep working. Same thing if we add new features to a bonus plugin or create a new tool, if your membership is not active you won't have access to them, but you'll be able to keep the files you downloaded from your account's dashboard.

 

Hopefully this helps and let us know if you have more questions.

Happy Tweening!

[PointC]

@Rodrigo getting all stylish with double color changes.