Jump to content
Search Community

Draw SVG starting from wrong point

sygad1 test
Moderator Tag

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

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

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