Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
reclifford1

Stagger fade-in text left to right

Recommended Posts

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>

 

Link to post
Share on other sites

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

  • Like 5
Link to post
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.

×