Jump to content
Search Community

DrawSVG not functioning as expected

Fettabachi test
Moderator Tag

Go to solution Solved by OSUblake,

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



This is my first attempt at DrawSVG. I've got 3 svgs that appear one-at-a-time then the stroke is drawn fromTo {drawSVG:"0% 50%"}, {drawSVG:"0% 100%"} and then the y position is animated. Everything works as I expect except for the first draw. It's not honoring the fromTo position. Can you please tell me where I've gone wrong.



See the Pen PPooEO?editors=001 by Fettabachi (@Fettabachi) on CodePen

Link to comment
Share on other sites

Thanks for the reduced demo, and I have to agree with Blake.

My assumption is that you may have drawn the bottom one first, copied it and then flipped it over to make the top one.


If you watch both the top and bottom one you can see that they both start drawing from that acute angle (its just that the top shape is flipped).

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