Stagger fade-in text left to right

[reclifford1]

I'm super new to staggering and am trying to replicate the text intro from the GSAP training.
https://www.screencast.com/t/EpI7mshp

I am trying to make the text fade in from left to right by character.

Any help is super appreciated.

 

<div id="main-copy" class="grid">
    <div>
        <p id="headline">
            {This is a headline copy area}
        </p>
    </div>
</div>

 

[Carl]

Hi and welcome to the GreenSock forums,

 

This demo here shows how to get pretty close to that effect.

 

See the Pen bGqrJGN by snorkltv (@snorkltv) on CodePen

 

Be sure to read the docs on SplitText and staggers. 

 

If you have trouble understanding the docs, everything happening in this demo is covered in my free GSAP 3 beginner's course (see signature).