Animate text on scroll line by line

[proxymoron]

I am trying to animate text as done on the "third section" (the Strategic Advisory part, shown in the screenshot) of this website. So far, I have achieved what is done in the codepen. I want to animate these line by line instead of the entire div. I tried making every line a span but it did not work as expected. Also, notice how the appearance and disappearance of the lines is not linked to the scrollbar at all. The scrollbar just triggers the animation, and the rest is automatic.

 

I wanted to make separate tweens for each div and link them to a single timeline that uses scroll trigger, but I have no idea how do I link (or play) external tweens to a timeline that has no relation with them. So on that note, could you tell me if this is possible?

 

I have more questions but for now lets leave it at these two :)

See the Pen rNmwRbR by proxxymoron (@proxxymoron) on CodePen

[GreenSock]

I assume you wanted something more like this, right?:

See the Pen ZEKygRz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You might want to consider getting a Club GreenSock membership so that you can use SplitText which would make it quite easy to dynamically split apart text into lines (or words or characters): 

 

 

That way, you don't need to manually break everything into different <p> tags

 

Happy tweening!

[proxymoron]

5 hours ago, GreenSock said:

I assume you wanted something more like this, right?:

 

 

 

You might want to consider getting a Club GreenSock membership so that you can use SplitText which would make it quite easy to dynamically split apart text into lines (or words or characters): 

 

 

That way, you don't need to manually break everything into different <p> tags

 

Happy tweening!

Yep. This is what I wanted. Thanks a lot