draw dashed path svg

[tganyan]

So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of.

Also, if you disable the js and run the pen that will show what I am trying to get the line to look like. 

See the Pen KYNZZv by tganyan (@tganyan) on CodePen

[PointC]

Yep, DrawSVG works its magic by making one big dash and animates the offset. You'll need to use a mask to make this work.

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

 

I wrote a bit about this here:

Happy tweening.

 

[GreenSock]

@PointC is a master at this stuff. He's got several codepens that illustrate it very well, as he linked to above (but go through his codepen collections and you'll find plenty of nuggets in there). Enjoy!

[tganyan]

Thanks! Looks like I'll have to read up some more on svg masks; I have an understanding of what a mask is/does generally speaking, but I still am not quite sure I understand why this particular mask is getting the desired effect. Which I'm sure comes down to a lack of intuition on this from being less experienced.


Update: Nevermind, I definitely get it. I hadn't noticed that the target element in the js was changed to the mask and not the regular motionpath. On initially looking at the markup, I thought just the motionPath was still getting animated and it made no sense to me, this does though.