Circle progress on scroll | top to bottom

Hello everyone!

I have this diagram that I need to animate on scroll like this:

While scrolling into view, the circle border radius should change of color from top to bottom.


Any ideas?

Thank you!

Hey @Quitos I’m not sure I understand the animation - can you provide more details? Are there two circles on the page or does that represent the two states? Are you scrolling the page? The div block? Do you want the whole circle border to change or just the arc section like the diagram?

Hi Keegan! Thanks for your reply. Apologies for the lack of info. I’ll try to explain myself better.

There are two overlapping circles but it’s irrelevant tbh, as I’ll simply duplicate the animation. Also, ignore the “Div Block” on the screenshot.

I need when scrolling the circle into view to change the color of the border radius. Like a progress bar but in circle shape - top down, at the same time on both sides (not like a clock).

tl;dr: while scrolling => circle radius starts to change color from light grey to black from top to bottom (not clockwise, not all at the same time) like on the screenshot, until the circle border is fully black.

I hope I explained myself better!

Here’s a video on how to do it.

Here’s the read only link to check it out for yourself.

1 Like

Hey Keegan!
I just watched your video and I believe this is exactly what I need!
I’ll give it a try tomorrow as it’s late here.

Here’s how the basic layout will be: recordd

Each title inside the circles corresponds to one paragraph on the right column. So, as the user scrolls the circle border fills.

I’ll let you know tomorrow once I tested it.

BIG THANKS for taking the time!!