Jump to content


Draw SVG starting from wrong point

Recommended Posts

Hi All


I've created a drawSVG but when comparing it to a vivus.js version, they start from different points, how can I control the starting points on my GSAP version?


Any help appreciated


See the Pen vJLoeb by sygad1 (@sygad1) on CodePen


See the Pen aydpRW by sygad1 (@sygad1) on CodePen

Link to comment
Share on other sites

You can start at the other end like this:

.staggerFrom(".svg-path", 0.8, {drawSVG:"0% 0%"}, 0.08);


or you could use a fromTo() like this:

.staggerFromTo(".svg-path", 0.8, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"}, 0.08);


or you could even get fancy and start in the middle like this

.staggerFromTo(".svg-path", 0.8, {drawSVG:"50% 50%"}, {drawSVG:"0% 100%"}, 0.08);


DrawSVG is quite flexible for starting points. You could also reverse your path in your vector software before animating. 


Hopefully that helps. Happy tweening.


  • Like 5
Link to comment
Share on other sites

Weird, I'm really not seeing a difference and I've tried comparing most of the characters.

Can you please describe what about the GSAP is wrong?


Might help to put both animations in the same file so we can see them running simultaneously and slower, OR just reduce the demo to illustrate a single character that isn't giving you the desired results. 

Link to comment
Share on other sites

it was starting from the end of the path


Craig has nailed the answer, I was setting my animation 100% 100%, it should have been 0% 0%


All sorted now

  • 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.