DrawSVG not animating - SVG issue or brain issue?

[SammyC123]

I haven't played with DrawSVG in a while and I'm trying to animate a simple path of some scribbles.  I thought it was as simple as a 

TweenMax.fromTo(obj, 3, {drawSVG: "0% 0%"}, {drawSVG: "100% 100%"});

 but no matter what I try, I can't get it to work.  I feel like I'm missing something super basic.  Is my SVG problematic or am I doing something wrong?

 

Thank you in advance!  I love this community and this product so much.

See the Pen by (@) on CodePen

[GreenSock]

There are a couple of issues:

1. The percentages refer to the starting and ending points of where the stroke is drawn, so "100% 100%" would literally have no length at all. I think you meant "0% 100%"
2. DrawSVGPlugin is for animating the **stroke** of an SVG path/element, but it looks like you've got just a filled path. That won't work. If I understand your goal correctly, you'd need to animate a mask. Like maybe draw a stroked path over the top of your letters/signature and use DrawSVG to animate the stroke and use that as a mask (and of course make sure the stroke-width is thick enough). Not trivial, but probably doable. I think we've had a few other threads about this type of effect here in the forums like https://greensock.com/forums/topic/15868-animate-a-handwritten-signature/

Happy tweening!