Draw SVG and Dashed line problem

Recommended Posts

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,



Share this post

Link to post
Share on other sites

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: 



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. 

  • Like 1

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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!

Share this post

Link to post
Share on other sites

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



Layering with same background color



Custom function to calculate offset


  • Like 3

Share this post

Link to post
Share on other sites

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. 



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.