Rotational fill animation

[Lee Marshall]

I wonder if some kind soul could help me with the following ask.

 

We have a segmented circle (ask1.png attached) When the user clicks on a segment, an orange wash fills the circle up in an anti-clockwise animation (ask2.png attached) until the whole circle is orange, when some text will appear (ask3.png).

 

I have been racking my brains trying to work out how to approach this, so any help would be gratefully received!

[GreenSock]

Is that orange "fill" supposed to be gradated like that (feathered/blurred)? That makes things more difficult, but not impossible. 

 

I mean in its most simple form, you could place pie-cut segments of orange along the circle, and just animate the opacity in a staggered fashion. If you need it to be gradated in a totally smooth way, you might need to make a .png that's basically HALF of the circle. Make a mask of the opposite half, and animate the rotation of that .png so that it comes into that mask on the other half. Then when that reaches 180 degrees (half the circle), pop that out of the mask and keep going to 360 degrees while you do exactly the same thing with another .png that's half the circle but fully opaque orange. Rinse and repeat until that first one gets to 540 degrees and the other two half-circle .png files are filling the circle. 

 

Good luck!

[Lee Marshall]

The second one sounds quite complex, but probably closer to what I am after. As I'm pretty new to GSAP, have you seen any examples of this method?

 

Cheers!

 

[GreenSock]

No, sorry. But hopefully my description gets you going in the right direction.

 

I'm not sure if it'd be any easier or work the way you want, but another idea is to use DrawSVGPlugin to basically draw a super fat orange stroke, and see if you can do a blur effect on the end of it (you'd likely need to clip/mask the other end to keep that sharp). 

 

If you need more help, we do offer paid consulting services which you can contact us about. 👍

 

Good luck with the project, and thanks for being a Club GSAP member! 💚