Draws SVG is not revealing the segment as expected

[Kenner Stross]

I have a very, very simple svg set up to test and understand the DrawSVG plugin. It's just a line, and I'm just trying to reveal the middle portion of the line. But... what I see are series of dashed lines. Clearly I'm misunderstanding something. If anyone has insight into what I'm doing wrong, I would greatly appreciate hearing from you. Thx

See the Pen zYvbRze by kennerstross (@kennerstross) on CodePen

[GreenSock]

The problem is that you're animating the wrong element - you put your "myline" id on the <svg> element instead of the actual <path> whose stroke you're animating. 

 

Here's a fork where I put the id on the correct element and fixed the tween too:

See the Pen b83aee71e1a5b0368f42228c59985428?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

[Kenner Stross]

Yes, thanks Jack - it's all starting to make sense to me now.

[GreenSock]

No problem! And thanks for Joining Club GreenSock. 🙌

 

Don't worry - once you get through the basics learning curve, it'll all start to make a lot of sense and your animation superpowers will take off. 

 

Happy tweening!