DrawSVG Plugin

[Fábio Novais]

Hi there!
I´m trying to do something with the drawSVG Plugin, and I can't figure it out where I´m doing wrong.

I need both strokes to grow from 0 to 100%, clockwise. Could it be something missing in the SVG?

 

See the Pen oMYWNo by fnovais (@fnovais) on CodePen

[PointC]

Hi @Fábio Novais 

 

Is this what you need it to do?

 

 

See the Pen PBbjWZ by PointC (@PointC) on CodePen

Happy tweening.

 

[Fábio Novais]

Yes, that's the expected result, but the whole problem is that I have a sequence of 11 strokes likes those ones, and they must grow one after another.
I was trying to figure out the reason why some of the strokes grow clockwise and anothers grow counter-clockwise, so I could use the same tween for all of them. Any idea? Could it be something that I did wrong in Illustrator?

[PointC]

Yep - that's gonna depend on how you drew your path in AI. The two from your demo were drawn differently so they needed separate tweens. 

 

With open paths in Illustrator it's hard to tell which way it goes, but a little trick can help. Go into the stroke panel and add an arrowhead to the end of the path while you're working. If a path is backwards you can reverse it in the upper menu pull-downs.  Object --> Path --> Reverse Path Direction. Then just remove the arrowheads before you export for SVG animation.

 

Hopefully that helps. Happy tweening.

 

 

 

[Fábio Novais]

Thanks a lot. Really helped me out. ?