Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

DrawSVG changing the direction of how the path moves

Recommended Posts

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

Link to comment
Share on other sites

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);
  • Like 1
Link to comment
Share on other sites

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

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.