Jump to content
GreenSock

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

DrawSVG not functioning as expected

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

Hello,

 

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.

 

Thanks

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

Link to comment
Share on other sites

if there is still a problem, please create an isolated demo that only contains the svg and animation code that shows the problem. thx

Link to comment
Share on other sites

Thanks for catching that error but the behavior for the first draw begins at 0 0 where the other two begin at 50 50. I've cleaned up the pen. Would you give it another look please?

 

See the Pen MaWxqL by Fettabachi (@Fettabachi) on CodePen

 

Thanks

Link to comment
Share on other sites

  • Solution

I think you drew the top shape reversed. You need to draw the points from the same origin and in the same direction.

 

See the Pen GpRLrd?editors=101 by osublake (@osublake) on CodePen

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

Very impressive on the diagnosis and the great feedback.

FYI - I convinced our company to join Club Greensock yesterday. It was an easy sell. 

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