How can I create such an animation with text (filling it with color)

[mr.G]

Hello!

Could you say how can I create the same effect, please?
Link to animation: https://drive.google.com/drive/folders/16hVBmQ8v3XZsKS7WRghidVecbXzO6x1h?usp=share_link

Best regards,
Mr. G

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mr.G]

Okay, I understand you. Sorry for the inconvenience
 

Unfortunately, I just do not understand how to make this effect. I just don't understand how this text fills. This needs to be played with opacity or add a second paragraph of text. In short, I don't understand.

That's why I wrote to you here, there was no other solution

[mr.G]

More precisely, I understand how to do it with all the text at the same time. It's simple.
But how to do it smoothly and gradually is not clear to me 🤔

[alig01]

Hey, basically you could achieve this effect with stagger,

 

See the Pen eYQVaQL?editors=1010 by alig01 (@alig01) on CodePen

 

distributeByPosition is a helper function, the details and the explanation could be found here: 

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

 

Hope this helps

[Rodrigo]

Hi,

 

Create two texts that are in the same position (absolute in a parent that has position relative) and then just use SplitText to create the lines and animate them in sync.

 

Something like this example but with lines:

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

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Well.... what @alig01 already said  

[mr.G]

Thank you all for your help