Starting point of Animation using DrawSVGPlugin

[andresfcamacho]

Hi there,

 

I've got an SVG circle that I'm drawing using the DrawSVGPlugin. Say I want to draw from 12 o'clock to 9 o'clock, I would use `drawSVG: '0 75%'`. However, when I do this, for some reason my drawing is always starting at 3 o'clock. So `drawSVG: '0 75%'` ends up animating from 3 o'clock to 12 o'clock. My questions are, why is my animation always starting at 3 o'clock? And how do I get it to start at 12 o'clock? Maybe this is more of an issue with my SVG? I'm a rookie at SVGs so I'm not sure.

 

I've attached a codepen which will hopefully illustrate the problem.

 

Thanks

See the Pen xgWOvP by MaxMillington (@MaxMillington) on CodePen

[PointC]

Hi andresfcamacho 

 

Welcome to the forum.

 

That has nothing to do with GSAP. SVG circles always start at the 3 o'clock position. The easiest way to solve it is by rotating your circle (or entire SVG) to the desired starting point and using drawSVG as needed.

 

Hopefully that helps a bit.

 

Happy tweening.