Jump to content


Starting point of Animation using DrawSVGPlugin

Recommended Posts

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.



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

Link to comment
Share on other sites

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.


  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.