Draw SVG and Dashed line problem

[Pusher 2 Likes (Newbie)]

Hi there,

 

I am new to draw SVG and having problem getting started. Sorry if the solution is simple. I have done tutorials and can't find the answer anywhere.

 

Am I missing something in the attached codepen?

 

I just want the line to draw from the top left to the bottom right.

 

I would also like the line to appear as _ _ _ _ _ _ _ if possible.

 

Thanks so much for any help,

 

Phil

See the Pen vLOZjW by phillip_vale (@phillip_vale) on CodePen

[GreenSock 8,117 Likes (Superhero)]

There were a few problems I noticed:

1. You were targeting the entire <svg> instead of the actual <polyline>. So your tween's target should have been "#line2" in your case.
2. The points value had extra spaces in it. BAD: "0, 0 300, 250", GOOD: "0,0 300,250"
3. The tween was animating to a value of "0 100%" but the <polyline>'s stroke started out as fully visible, so you were saying "tween from fully visible to fully visible" (nothing to tween). You could have set it initially to 0 like TweenLite.set("#line2", {drawSVG:0}) or you could just change to a from() tween so that it tweens from 0 to whatever the current value is (which is basically "0 100%"). 

The result can be seen here: 

http://codepen.io/anon/pen/BjNdJB

 

Does that clear things up? 

 

Oh, and sorry but you cannot animate a dashed line like that because the way drawSVG works is by making one big dash and animating its offset. 

[Pusher 2 Likes (Newbie)]

Jack, thank you so much. That definately clears things up.

 

Can you explain how these coordinates translate?

 

0, 0 300, 250

 

Trying to do a pretty intricate build.

[GreenSock 8,117 Likes (Superhero)]

Sure, the values in a <polygon> or <polyline> are just x/y pairs, like:

points="x,y x,y x,y"

Is that what you're asking? 

 

If you're doing an intricate build, you might want to just lean on an editor like Adobe Illustrator to do the graphics and then you can simply export the SVG from there and animate it using GSAP. Chris Gannon has some great videos on YouTube about his process. Petr Tichy offers some [paid] training videos too (see the banner lower on this page). Sara has a great article here too: http://sarasoueidan.com/blog/svg-tips-for-designers/

 

Good luck!

[OSUblake 9,990 Likes (Superhero)]

You might want to check out this thread that has some work arounds to animating a dashed stroke.

http://greensock.com/forums/topic/12201-draw-svg-plugin-to-animate-a-dashed-line/

 

Layering with same background color

See the Pen zGXvWW by MAW (@MAW) on CodePen

 

Custom function to calculate offset

See the Pen jPRbjL by osublake (@osublake) on CodePen

[Pusher 2 Likes (Newbie)]

Thanks so much for the help. I think i have it now. 

 

I was actually reading the points completely wrong. Worked it out on the bus into work. 

 

Cheers!