How to animate circle one at a time based on scroll?

[iAmWayne 0 Likes (Newbie)]

How do I animate the circles one at a time? Im using react, the circles works just perfectly fine but the content animates at the same time and not based on the scroll.

 

 

**You can scroll to view the content

See the Pen abjjNWm by iamwayne (@iamwayne) on CodePen

[GreenSock 18,591 Likes (Superhero)]

Are you looking for something more like this?: 

See the Pen JjBBKdp?editors=1010 by GreenSock (@GreenSock) on CodePen

[iAmWayne 0 Likes (Newbie)]

Thanks a lot, that's what I need

[iAmWayne 0 Likes (Newbie)]

Is it possible to animate an element's height from the top (0px) to the center of the screen and stay centered while scrolling until it reaches the parent element's height?

 

I think I'm doing it right but the line doesn't seem to work out. I'm thinking when the line reaches the circles, the circles would animate.

 

here's the codepen link.

See the Pen abjjNWm by iamwayne (@iamwayne) on CodePen

 

thanks

[Cassie 5,407 Likes (Superhero)]

Sure, you can add start and end markers wherever you need.

It'll just have to be a little more custom!

 

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

[iAmWayne 0 Likes (Newbie)]

Wow, thanks