Drawsvg on my pen - what am I missing?

[ErwinHeiser]

First post here! Just getting started with gsap after attending an svg workshop at the beyond tellerand conference.

Got a test pen up trying out the draw svg plugin but nothing much is happening... anyone have any idea what I'm doing wrong?

I've included the svg file for reference.

 

CBHOME-illustratielijn.svg

See the Pen WNaBBZy by eheiser (@eheiser) on CodePen

[Carl]

Thank you for the demo.

I removed the drawSVG code and just added a little code to color each of the 5 paths a unique color

See the Pen ExdBrYO by snorkltv (@snorkltv) on CodePen

 

It appears the paths have some odd gaps in them. The green path is part of the ear on the boy and then it's also most of the girl but her arm has multiple paths (blue and yellow).

 

I'm not sure if this makes it somehow impossible for drawSVG to calculate stroke lengths and such, but my general advice is to start with much simpler paths. Draw them one at a time and test with DrawSVG often.

 

DrawSVG handles multiple, continuous paths just fine.

I don't think there was any problem with your actual code.

 

 

[mvaneijgen]

Hi @ErwinHeiser welcome to the forum!

 

I wanted to jump on on top of @Carl's feedback with the following pen. DrawSVG can animate strokes, and your current paths don't have strokes only a fill color.

 

As you can see below all your paths have two strokes around the path. If you want to animate something like this you have to redraw them with without a path and only one line with something like the pen or pencil tool from Illustrator, than I think it will look like you want it to. Oh and I also have removed pathLength="1" from the svg, never seen it before and don't know what it is doing and with it looked like it wasn't working. Hoop dat het helpt en veel geluk!

 

See the Pen oNarmbv?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[ErwinHeiser]

Cheers Carl & Mitchel, will investigate further. Thanks for the pens!

[Cassie]

Also hi @ErwinHeiser! Lovely to see workshop people popping in to the forums 💜

 

FYI,  pathLength="1" is only needed if you're animating with CSS. (from the workshop docs) It's a bit of a hack to get around the complicated lengths you have to deal with without GSAP helping you out!

[ErwinHeiser]

@Cassie D'oh! Oh well, still finding my bearings Cheers!

[Cassie]

Not at all, it's good to know the stumbling points - I'll make a lil note in the docs!