DrawSVG changing the direction of how the path moves

[venn 23 Likes (Newbie)]

I am new to the DrawSVG plugin.

 

I have researched the API and it is easy to use and understand. Good job guys!

 

I am trying to create the Google Material spinner as demonstrated here 

See the Pen EiplA by mrrocks (@mrrocks) on CodePen

However my version isn't working out quite nicely. 

 

Here is my intent:

spinnerTimeline.fromTo("#circle", 1, {drawSVG:"20%"}, {drawSVG:"20% 100%"}) <-- A
               .fromTo("#circle", 1, {drawSVG:"20% 100%"}, {drawSVG:"20%"}); <-- B

A: Grow the stroke from 20% to 20% 100%.

B: Shrink the stroke back from 20% 100% to 20%. 

 

However B is taking the shortest path to do this instead. How can I tell DrawSVG to go the other way round if you know what I mean?

See the Pen yexzVg by vennsoh (@vennsoh) on CodePen

[venn 23 Likes (Newbie)]

I spent a bit more time in experimenting different values and manage to get to something close to it.

spinnerTimeline.fromTo("#circle", 1, {drawSVG:"0%"}, {drawSVG:"20% 100%"})
	       .fromTo("#circle", 1, {drawSVG:"100% 20%"}, {drawSVG:"100% 100%"})
	       .to("#circle", 2, {rotation:"360", transformOrigin:"50% 50%"}, 0);

[GreenSock 8,117 Likes (Superhero)]

Looks great, venn. Glad you got it all figured out. Nice work. Let us know if you need anything else.