Jump to content
Search Community

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

mr.G test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 🤔

Link to comment
Share on other sites

  • Solution



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!

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