Share Posted February 4, 2016 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 More sharing options...
Author Share Posted February 4, 2016 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); 1 Link to comment Share on other sites More sharing options...
Share Posted February 4, 2016 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 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