Jump to content
GreenSock

Volt 22

Circular Progress Bar for a Section

Recommended Posts

Hello everyone,

I want to achieve the design as is on the webpage: https://decorsystems.com.au/about#approach

The implementation of the circular progress design was with svg but I am using div blocks.
I already have the small circles in position.

 

How do I achieve the circular progress movement?

How do I make the progress bar stop on every small circle?

See the Pen qBxvjGy by voltmeup (@voltmeup) on CodePen

Link to comment
Share on other sites

I bet you could achieve a circular progress bar by animating a radial gradient. As for stopping on every circle, use ScrollTriggers built in snap feature.

Link to comment
Share on other sites

Is there any reason you're not using SVG? That would be quite easy with DrawSVG. I'd also recommend using ScrollSmoother. You're a Club member so you already have access to all those awesome plugins. 

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Thank you @steveS and @PointC for the replies.

@SteveS, please can you elaborate on your solution? Not really sure how to start.
@PointC, that was my initial approach, but frankly, I know close to nothing about SVGs.

Link to comment
Share on other sites

1 hour ago, Volt 22 said:

I know close to nothing about SVGs

Time to learn then. ;)

 

This is how I'd set it up. A couple big circles and eight smaller ones. Using svgOrigin we can rotate the small ones into place and use drawSVG to animate the path. This should get you started.

 

See the Pen xxYBPYP by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Thank you very much @PointC. 

I really appreciate the time and effort. 

 

Thanks again.

  • Like 2
Link to comment
Share on other sites

6 hours ago, SteveS said:

it's a bit choppy for reasons I don't know

Probably because you set autoRound: true which rounds the values :)

 

I'm curious why you did that. 

Link to comment
Share on other sites

1 hour ago, GreenSock said:

Probably because you set autoRound: true which rounds the values :)

 

I'm curious why you did that. 

It was doing it before, I tried false but it didn't help, guess I tried true and then forgot. Either way it is choppy. I know I've done it before smoothly so I'm not sure what the deal is here.

Link to comment
Share on other sites

Hm. It looks smooth to me. If you look in Dev Tools, do you see the value animating smoothly with decimals? I'm not seeing any problems. 🤷‍♂️

Link to comment
Share on other sites

@GreenSock I opened it in chrome and it IS animating smoothly, however, in FireFox it is not.

Link to comment
Share on other sites

Oh, that's definitely a browser rendering thing. Increase the duration to like 60 seconds, open dev tools and look at what's happening. GSAP is animating the CSS variable perfectly, but Firefox is only rendering when it crosses a whole number threshold. So 48.1%, 48.4%, 48.7%, etc. all render exactly the same as 48%. Silly browser. I don't see a way to work around the browser bug right now. I'd go the SVG route personally.

  • Like 1
Link to comment
Share on other sites

Huh, I'll file a bug report with Mozilla if there isn't one already. This use case isn't so important since SVG is just a better option, but animating CSS variables in gradients is a trick I've used before and it shouldn't be breaking.

 

Link to comment
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.
×