Hello Team

[Nisha Prasad 0 Likes (Newbie)]

As I am new to this Draw svg plugin so unable to work on required output. I have one svg file which should be drawn when user opens the page. Below are the 3 lines svg file. I want output like this :  ie how dotted lines are moving. But mine is not working. Is my svg file code is correct. Urgent help please.

line1.svg line2.svg line3.svg

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

[Cassie 5,128 Likes (Superhero)]

Hey there - sorry I don't understand what you're struggling with. This pen seems to be working fine.

If this isn't your pen and you want help with something else, could you create a minimal demo showing what you're tried so far?

[PointC 14,185 Likes (Superhero)]

Yeah, that's one of my demos from this thread:

The first line is masked. The second one is animating the strokeDasharray. As @Cassie mentioned, they seem to work fine, so maybe you could put together a minimal demo of what you're attempting. 

 

Happy tweening.

[Nisha Prasad 0 Likes (Newbie)]

Hello I have my dotted svg file which needs to be animated using drawsvg. Attaching my demo html file. My first dotted svg is not animating like other dashed line.

gsap-runner-box.html

[Nisha Prasad 0 Likes (Newbie)]

You can check from codepen the first svg is not animating. Do know whats the error in svg. 

See the Pen PoQGLwg by nisha_code (@nisha_code) on CodePen

[Cassie 5,128 Likes (Superhero)]

I think there's some core fundamentals missing here. 

All the other examples are animating a stroke which is inside an SVG mask. Whereas you're targeting multiple circle elements.

 

Quote

DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG element - It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.

 

The way you're attempting it isn't going to work - it's a bit like trying to follow a music tutorial to play a song, but you're using a banana instead of a guitar. It's not an error in the SVG, it's the wrong SVG markup entirely.

 

It's definitely hard to see what's going on with masks though as they're invisible, so that's a tricky place to start trying to understand drawSVG. I've taken the path out of the mask here so you can see what's happening.

Does that make it a bit more clear to you what's going on? 

See the Pen WNMGBJB?editors=1010 by GreenSock (@GreenSock) on CodePen