Share Posted September 30, 2015 Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks! See the Pen WQRyKp by anon (@anon) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 1, 2015 Hi and welcome to the GreenSock forums, Thanks for the demo. The issue is that DrawSVG can't draw a segment at the end of the path at the same time it is drawing a segment at the beginning (which is needed for a seamless loop). One solution is to create 2 paths with 2 segments and animate them in a way that when one path is shrinking on the way out, the other is growing on the way in. In this example I have 2 circles on top of each other: http://codepen.io/anon/pen/MaJqjW?editors=001 click the cheat button to see how the 2 animations are synchronized. Mess with the timeScale() too to slow it down, like timeScale(0.2) 6 Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2015 Thanks Carl, That's kind of what I feared, I guess I can go into the illustrator file and duplicate all the layers, thank you so much for your codepen example! Link to comment Share on other sites More sharing options...
Share Posted October 1, 2015 Very cool and great example Carl 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2015 Thanks Carl! Updated my codepen with your suggestions: See the Pen rOyBPK by anon (@anon) on CodePen Was wondering, how did you come up with those numbers (time and percentages)? Was it trial and error? Link to comment Share on other sites More sharing options...
Share Posted October 2, 2015 My Math skills are limited so I had to keep it simple. After setting the duration to 2 (on a whim), my thinking was... If my segment is 10% of the total path and I need to shrink it down to 0%, it should take 10% of the total duration to do that which gave me 0.2 for the shrink and 1.8 for the rest of the tweens. 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 2, 2015 Yes! That makes absolute sense to me and did help me figure out how to get the correct numbers depending on the percentage of the segments needed. Thank you sir. 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