Draw dashed line using DrawSVGPlugin

[nickraps 4 Likes (Newbie)]

Please see the Pen.

 

I use a <path /> with stroke-dasharray to create a dashed line. But then if I draw it with DrawSVGPlugin, it gives me a solid line. I know DrawSVGPlugin uses stroke-dasharray underneath. So is it even possible to draw a dashed line with GSAP? 

 

Thanks. 

See the Pen XWZgqZM by noahsong (@noahsong) on CodePen

[PointC 14,418 Likes (Superhero)]

Hi @nickraps 

 

You'll need to use a mask for that. I have a whole tutorial about it here:

https://www.motiontricks.com/svg-dashed-line-animation/

 

One of the demos from the tutorial.

See the Pen 1ecacafb5c4579ea20c360a6ac8f070c by PointC (@PointC) on CodePen

 

Happy tweening.

 

[PointC 14,418 Likes (Superhero)]

And a fork of your pen with that change.

 

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

 

Happy tweening.

 

 

 

[nickraps 4 Likes (Newbie)]

21 minutes ago, PointC said:

And a fork of your pen with that change.

 

 

 

 

Happy tweening.

 

 

 

 

 

Thank you! I don't need yoyo and repeat. But I wrote the exact same code to my project but it animates out instead of animating in. Really scratching my head - do you know a possible cause?

[PointC 14,418 Likes (Superhero)]

I used a from() tween in my fork of your demo. Did you happen to switch it to a .to() tween? Then it would animate from 100% → 0.

[PointC 14,418 Likes (Superhero)]

You can also use percentages:
 

gsap.fromTo(
  "#masker",
  { drawSVG: "0% 0%" },
  { drawSVG: "0% 100%", duration: 3 }
);

 

[nickraps 4 Likes (Newbie)]

5 minutes ago, PointC said:

I used a from() tween in my fork of your demo. Did you happen to switch it to a .to() tween? Then it would animate from 100% → 0.

That's exactly the cause... thanks!

[PointC 14,418 Likes (Superhero)]

Great - glad to hear it was something simple. Happy tweening and thanks for being a Club member.