SVG with greensock, animating lines

[celli]

Hi, I've been experimenting with drawing paths with GSAP and SVG objects.

I noticed a few things, and wondering if there is a better way to accomplish these:

 

1. My codePen is using code that is great for multiple paths, even though I only have one circle-path on this one

2. I notice the transform X doesn't quite center the element (using xPercent:-50), maybe because it starts from the left center. Is there a good way to center these elements ?

3. It looks like any path I try always starts from the left center position, is there a way to start it from the top, or bottom or an other position I can set? I accomplished it starting from the top on this one, because it is a circle rotated by 90 degrees, but what if it wasn't a circle ? Is there another way to start the path drawing from another position ?

4. I found another codePen by Carl here 

See the Pen zLiux by GreenSock (@GreenSock) on CodePen

, Is this a more efficient way to animate SVGs paths with GSAP ?

See the Pen kByDf by celli (@celli) on CodePen

[Diaco]

Hi celli 

 

- pls load the last version of TweenMax ; already 1.11.1 is loaded in your codepen !...  xPercent and yPercent (added in version 1.13.0)

http://greensock.com/gsap-1-13-1

 

- SVG line drawing start from where the path started 

 

and the Carl codepen method is the best way to svg line drawing .