Jump to content


Circular progress multiple colors

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello its possible create a circle with multiple colors and a correct percentage?



i see that example 



and what i want its like this image i put in attach.




See the Pen doXdbj by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I don't think there is a really easy or straightforward way.


I'm not sure if those colored arcs are arbitrary lengths or if they represent individual or groups of assets that are loading so its really hard to advise properly.


i suspect you could have multiple circle strokes for each color and use DrawSVG to position them and animate them all correctly.


The easiest thing to do would be to have the artwork you have covered by a stroke that acts as a mask. as you grow the mask, you reveal the multi-colored stroke beneath it.


In this demo there is an S with a brush stroke, a stroke mask on top of it is animated to reveal the stroke:


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.