[Animating SVG line strokes with DrawSVG plugin]

Hi all,

 

I'm trying to animate an SVG <line> and a <circle> which are both dashed. What I need is the dashes to be shown one-by-one (staggered, I guess ) to make the line "drawn".

 

I've tried animating the strokeDasharray like so (where "secondStepDashedLine" is the <line> element) which didn't do anything really:

tlInitial.staggerFrom(secondStepDashedLine, 1, { strokeDasharray: 0 }, 1.5);

Is there any way of doing this?

 

Thanks in advance.

See the Pen XjZkQB by anon (@anon) on CodePen