DrawSVG not working in Vue project

[Arteau]

Hi, 

 

My name is Arteau, I'm very new Simply Green GSAP member.

I'm working on a Vue project where I want to draw in a purely line-art illustration with the DrawSVGPlugin, but it isn't working.

I am not getting any import errors, and when I test out TweenMax without DrawSVG it works, so the problem is specifically with DrawSVG I think.

 

Here are some screenshots.

The script section of the view I'm working in:

 

here is the svg:

the collapsed groups are set up exactly as the two expanded groups, pure paths with the "draw-me" class.

 

This is the webpage with the illustration I want animated, it simply doesn't do anything:

 

Can someone maybe help me with this?

[PointC]

Hi @Arteau,

 

Welcome to the forum.

 

I see a whole bunch of filled paths in that SVG, but no strokes on anything. The DrawSVG plugin only animates strokes, not fills. Please try adding a stroke to some or all of the paths and I think you'll see it start working for you. You may have to change your artwork a bit too as adding a stroke will create an outline on the outside of each of the filled paths which is probably not the effect you're after here.

 

Hopefully this helps a bit. Happy tweening and welcome aboard.

 

[Arteau]

@PointC thanks for your reply!

That might just be the problem!

However, I went back to the illustration in Illustrator and nothing is expanded, all of it are single-strokewidth paths.

The problem is presumably with my export from Illustrator then?

My export settings are:

 

[Arteau]

Just for the sake of it I replaced the inline styling of the svg with external css where I set the fill to none, and the stroke to 1 pixel black.

The illustration now looks like this:

 

 

and it still doesn't animate at all...  EDIT: I forgot to add the animation class to the paths.. It does animate correctly now, I just need to get it to look right.

[PointC]

I guess you have two issues.

 

One: is the DrawSVG plugin working?

For that, I'd recommend just adding a simple SVG with one line and see if it will draw. You could test with something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="20" viewBox="0 0 500 20">
<line x1="0" y1="10" x2="500" y2="10" stroke-width="5" stroke="red"/>
</svg>

 

Two: artwork prep.

It's not just the settings in the export. Your actual artwork looks like it's made up of filled paths. You want open paths with strokes.

 

Take a look at this example of two paths.

 

See the Pen YMoGNY by PointC (@PointC) on CodePen

 

Both paths look identical, but the top one is an open path with a stroke and you can see that the DrawSVG plugin animates it correctly. The bottom one seems like it's the same, but it's really a filled path. If you want to animate a filled path to look like a stroke, you'll need to use a mask. But it would probably be easier to go back to Adobe Illustrator and make the changes.

 

Make sense?

 

Please give those ideas a try and let us know what you find out.

 

Happy tweening.

 

 

 

[PointC]

I see you edited your response so problem one is solved. At least the plugin is working correctly now.

 

Now you just need to fix up that artwork. Let us know if you have additional GSAP questions or problems. 

 

Happy tweening.

 

[Arteau]

I got it to work.

I drew the lines with a wacom tablet, they weren't shapes, they were in fact open strokes.

The problem was that they didn't have a uniform width profile, so Illustrator exported them as shapes instead.

Thanks for all the help!!

[PointC]

Excellent. I'm glad to hear it's all working well for you now. Let us know if you have additional GSAP questions or problems and thanks for being a Club GreenSock member.

 

Happy tweening.

 

PS If you do want to use variable width strokes (which are actually filled paths), you can mask the lines and get a nice animation. This is a demo from another thread, but it show the basic technique.

 

See the Pen JpPzvN by PointC (@PointC) on CodePen