Having issues animating dotted line in svg

[dan098]

I know it should be really simple, but tried every tutorial there with my svg and it doesn't work... 

Any help appreciated.

See the Pen ZErNNVm by tiamat (@tiamat) on CodePen

[akapowl]

Welcome to the GreenSock forums @dan098

 

First off, you forgot to load the DrawSVGPlugin - also you are using rather old versions of GSAP and ScrollTrigger, best stay up to date.

 

Technically things should already work after adding the DrawSVGPlugin - but I don't think it is possible to draw out dashed strokes like you have there - not even with the DrawSVGPlugin if I am not mistaken.

 

If you want to draw out dashed paths, you will probably have to mask the path itself and animate the mask instead.

 

I recommend having a look at @PointC's tutorial over on motiontricks.com for something like that.

 

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

 

 

 

Here's a pen just showing that the drawing itself already works when you load the plugin

 

See the Pen bGLyPEM by akapowl (@akapowl) on CodePen