seamless loop with DrawSVG

[eballeste]

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

[Carl]

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)

[eballeste]

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! 

[Jonathan]

Very cool and great example Carl

[eballeste]

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?

[Carl]

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.

[eballeste]

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.