Text animation, Split text, Scroll. Newbie question

[Richdigdesign]

Hi there, 

 

May I ask the Greensock community for their wisdom please. I am trying to recreate something similar to this https://www.basili.co/ just the header animation. I guess it's a mix between a scroll loop and split text. I have tried in vein, any insight would be much appreciated. 

 

Thanks, 

 

Rich

[Shaun Gorneau]

@Richdigdesign I'm not even sure you need split text for this. To me it just looks like a series of animated lines, each with a "home" position and (eventually) highlighted text. Something like this,

 

See the Pen oNgQmGd by sgorneau (@sgorneau) on CodePen

 

Of course you'll want to adjust your final "landing" spot for each segment. And you'll want to look at how these lines of text are created from a semantic and accessibility standpoint.

 

Hope this helps!

 

Shaun

 

[ZachSaucier]

aria-hidden can help with accessibility.

[mikel]

 

After two beers and some pub maths:

 

See the Pen abzQeOo by mikeK (@mikeK) on CodePen

 

Have fun ...

Mikel

[Richdigdesign]

Thanks guys, this is perfect.