Text list that animates onto screen on scroll?

[ClumsyBreakdancer]

Hi all,

 

     I have a list of five items in a bullet point format on my site that I would like to animate onto the screen.  Nothing wild.  No parallax, no full-screen slides.  Simply have each text item in the list horizontally entering the screen from the left as the user scrolls down the page.  I would stagger the entry from the left so #1 is a little before #2, etc...

 

     Can someone guide me to an example of this?  I fairly sure I have seen something like this before, but I'm unable to find it now after searching many CodePen examples.  I think part of my struggle is not knowing the correct terms to search.

 

Thanks in advance for your help!

[Rodrigo]

Hi @ClumsyBreakdancer and welcome to the GSAP Forums!

 

Perhaps something like this:

See the Pen zxGjPgx by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[ClumsyBreakdancer]

Thanks a bunch!  I found that CodePen example probably 5-10 minutes before your post.

 

Could this animation be done with more than text alone?  In the examples (attached)

 

I would want to move the entire red bar with text inside.  Each bar would animate to its final location (from completely off of screen left) one-by-one as the user scrolls.

.

Start (blank)

 

Mid-scroll:

 

End (fully populated list):

[Rodrigo]

37 minutes ago, ClumsyBreakdancer said:

Could this animation be done with more than text alone? 

Sure thing! If it's in the DOM and is a valid DOM node, GSAP can animate it the way you want! ✅

 

In this case it could be done with the same demo I already posted with some CSS tweaks, nothing too complicated 👍