Jump to content
Search Community

Draw SVG and Dashed line problem

Guest Pusher
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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,



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

Link to comment
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
Link to comment
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.

Link to comment
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!

Link to comment
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

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


Custom function to calculate offset

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

  • Like 3
Link to comment
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. 



Link to comment
Share on other sites

  • 5 years later...

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.
  • Create New...