Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draw SVG starting from wrong point

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.