Volt 22 Posted June 16, 2022 Share Posted June 16, 2022 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 More sharing options...
SteveS Posted June 16, 2022 Share Posted June 16, 2022 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 More sharing options...
PointC Posted June 16, 2022 Share Posted June 16, 2022 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. 1 Link to comment Share on other sites More sharing options...
Volt 22 Posted June 16, 2022 Author Share Posted June 16, 2022 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 More sharing options...
PointC Posted June 16, 2022 Share Posted June 16, 2022 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. 4 Link to comment Share on other sites More sharing options...
Volt 22 Posted June 16, 2022 Author Share Posted June 16, 2022 Thank you very much @PointC. I really appreciate the time and effort. Thanks again. 2 Link to comment Share on other sites More sharing options...
SteveS Posted June 16, 2022 Share Posted June 16, 2022 My idea for doing it in just CSS works, but it's a bit choppy for reasons I don't know: https://codesandbox.io/s/xenodochial-snow-2oevyd?file=/src/styles.css Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2022 Share Posted June 17, 2022 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 More sharing options...
SteveS Posted June 17, 2022 Share Posted June 17, 2022 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 More sharing options...
GreenSock Posted June 17, 2022 Share Posted June 17, 2022 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 More sharing options...
SteveS Posted June 17, 2022 Share Posted June 17, 2022 @GreenSock I opened it in chrome and it IS animating smoothly, however, in FireFox it is not. Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2022 Share Posted June 17, 2022 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. 1 Link to comment Share on other sites More sharing options...
SteveS Posted June 17, 2022 Share Posted June 17, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now