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

[iAmWayne]

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]

Are you looking for something more like this?: 

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

[iAmWayne]

Thanks a lot, that's what I need

[iAmWayne]

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.

 

thanks

[Cassie]

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]

Wow, thanks