Jump to content
GreenSock

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

DrawSVG Not working

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 guys, I'm trying to use the DrawSVG plugin for the first time, and I can't get it to work (ie nothing is animating, my SVG just loads in full straight away and does not animate at all).
Clearly there is something I am missing, but I cannot for the life of me work out what it is. Before I throw my Mac out of the window I thought it would be best to ask for help :)

Thanks in advance,
Keith

See the Pen jeqzQx by akcreation (@akcreation) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Very helpful!

 

it looks like your paths don't have any strokes. Notice how I applied a red stroke with css.

 

See the Pen wYGQxe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

DrawSVG only works on strokes. You will probably have to recreate the artwork.

 

To use our bonus plugins on CodePen please see: 

 

https://greensock.com/try-plugins

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

In addition to Professor @Carl's excellent advice, you may find my post about Adobe Illustrator exports and DrawSVG start points helpful too.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

  • 3 years later...

Sorry if i'm misreading this, but it appeared to me that the original path in the codepen in the top post did have a stroke eg:

<path d="..." stroke-width="1" stroke="#60687a"></path>

Is that not a path with a stroke? Having some kind of similar problem here.

Link to comment
Share on other sites

Does this path have a stroke?
 

<path  class="path-3" id="path-3-1" d="M564.581 114.701C549.04 120.325 520.975 131.192 513.003 146.25C507.583 156.488 502 169.5 505.064 184.051C512.06 203.943 534.564 220.378 555.914 216.476C570.74 213.766 584.898 200.09 593.743 188.566C603.614 175.705 602.333 159.97 595.017 146.249C589.23 135.393 577.445 124.637 564.774 123.31C541.696 120.892 542.162 121.623 519.504 125.5" stroke="#AB0613" stroke-width="5px" stroke-linecap="round"/>

 

Link to comment
Share on other sites

14 minutes ago, Anna Leach said:

Does this path have a stroke?

 

Yes.

 

37 minutes ago, Anna Leach said:

Sorry if i'm misreading this, but it appeared to me that the original path in the codepen in the top post did have a stroke eg:

 

They might have changed it later.

 

Do you think you can make a minimal demo showing your issue?

Link to comment
Share on other sites

Hi @Anna Leach :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

1 hour ago, Anna Leach said:

the original path in the codepen in the top post did have a stroke

 

Yeah - that happens a lot. A demo is posted with a problem and once a solution is found, the original demo is corrected. That's why it's usually best to fork the original demo and then add the solution to the fork.

 

You can check to make sure you have a stroke on the target path along with the usual suspects:

  • Is the DrawSVG plugin loaded?
  • Are you registering the plugin?
  • Are you targeting a specific path rather than the whole SVG?

Other than that, as Blake mentioned, a minimal demo would be most helpful.

 

Happy tweening and welcome aboard.

:)

 

  • Like 2
Link to comment
Share on other sites

Also - there's a difference between a path that *is* a stroke, and a path *with* a stroke.


See the Pen oNegWGy by svganimationworkshop (@svganimationworkshop) on CodePen

  • Like 4
Link to comment
Share on other sites

Thank you so much for the help.

I was using an <object> tag to load the svg and that did not work. Have just inlined the svg and now everything works.

 

23 hours ago, Cassie said:

Also - there's a difference between a path that *is* a stroke, and a path *with* a stroke.

--> for future reference how do those two types of paths behave differently with DrawSVG?

Link to comment
Share on other sites

8 minutes ago, Anna Leach said:

I was using an <object> tag to load the svg and that did not work. Have just inlined the svg and now everything works.

 

Yes, targeting an object is much more complicated, and can't be done directly. Inline is definitely the way to go.

 

8 minutes ago, Anna Leach said:

for future reference how do those two types of paths behave differently with DrawSVG?

 

Best way is to test it out and see for yourself.

 

See the Pen xxLGGjP by GreenSock (@GreenSock) on CodePen

 

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