How to animate Opacity text animation while Scrolling

[Lucacv]

Hi devs,

 

I'm trying to achive this animation using GSAP:

 

As you can see the text is already present but the animation take place with opacity while scrolling.

 

Thanks all!

[_Greg _]

Hi @Lucacv

Welcome to the forum

Check ScrollTrigger free plugin and SplitText premium plugin 

 

[Rodrigo]

Hi,

 

@_Greg _ is right a combination of SplitText and ScrollTrigger can do exactly that:

 

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

 

Hopefully this is enough to get started.

Happy Tweening!

[Lucacv]

Many thanks to all of you guys. 

 

Is there a way to achieve this without the premium plugin? 

Maybe just play with opacity or color effect while scrolling?

 

Thanks again ❤️

[Rodrigo]

Hi,

 

You'll have to find a package that splits the text. Then you'll have set the absolute position on one of them by hand and create the animation.

 

I know there are a few options out there, but I don't recall the exact names, so you'll have to google for those.

 

Hopefully at some point you can afford being a Club GreenSock member since the perks are really awesome and you'll get your money back with one or two paid projects (normally just one short project is enough to pay for a year subscription).

 

Happy Tweening!

[Lucacv]

Alright, I was just looking for a workaround using basic version of GSAP. 

Thank you for your quick support. 

 

Amazing community.