Jump to content
Search Community

Draw a line along SVG path - MorphSVG or DrawSVG?

traummaschine test
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

I'm very new to GSAP - just playing around with it alongside ScrollMagic - working great so far, enjoying seeing what it can do.


I'm wondering if anyone could advise on the best method of 'drawing a line' with a PNG graphic (along an SVG path, if possible, as it needs to be responsive, and this seems to be the best route from what I've read)


It's looking like the MorphSVGPlugin (possibly using .pathDataToBezier ?) or the DrawSVGPlugin may provide the answer. This is the effect I'm going for - the pencil element travels along the SVG path and reveals the line. This SVG path could be more complex that the one here!




Apologies if this has been covered elsewhere - I did have a look through the forum, but couldn't find anything addressing this... any help much appreciated. Thanks in advance!

  • Like 1
Link to comment
Share on other sites

Hi traummaschine  :)


Welcome to the forums.


A straight line is pretty easy, but you're exactly right about the pathDataToBezier() method as your best answer for complex paths. You would then use the DrawSVG plugin to animate the line. I recently made a CodePen showing a pencil drawing a dashed line using masks. If you'll be using a solid line path, you won't need masks but everything else will be the same. Please take a look as I think it could send you in the right direction.


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


Just an FYI - MorphSVG and DrawSVG plugins are Club Member perks. You can experiment with them on CodePen, but to use them in the wild you would need a membership. You can find out more about that here:



If you run into trouble with your project, everyone around here will be happy to help. For the best answers, it's always best to create a CodePen showing the behavior or problem. Please take a look at this link to learn more about creating a CodePen.



Hopefully that gets you started and helps a bit.


Happy tweening and welcome aboard.


  • Like 5
Link to comment
Share on other sites

Thanks so much for your help here. I actually managed to get something working as part of my ScrollMagic project like so:


See the Pen BKpJJr by traummaschine (@traummaschine) on CodePen



This doesn't have the 'arrow' / pencil element yet (which I'm working on - and thinking I'll need the pathDatatoBezier function for, as you've both outlined above), and there's an extra element I'd like to add - a counter of sorts, which would count incrementally as the animation progresses. Ideally I'd be able to count from and to any given number (e.g. start at 15, end at 65), as opposed to the numbers being embedded graphically in a PNG or something.




Any idea whether this would this be possible at all?


I realise that this may all be too ScrollMagic-centric for this forum. Apologies if so. And thanks again for your help.

Link to comment
Share on other sites

You can easily Tween a counter between two values. Here's a simple CodePen to show you how that works:


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


If you want the counter part of the animation to actually relate to the progress of the DrawSVG tween, you should take a look at this thread:



Hopefully that gets you a little further along on your project.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

  • 4 years later...

This might be off topic, but I'm trying to draw lines with DrawSVG. It works, the circle is drawn, but it's not drawn with one stroke, it's drawn with the outerlines of the stroke not just one line as I want. Have I exported the SVG from AI wrong or can I have done something else wrong? Is it the way it's drawn in AI, I haven't drawn it myself. It's not my department... :)



Link to comment
Share on other sites

2 hours ago, Devotee007 said:

the circle is drawn, but it's not drawn with one stroke, it's drawn with the outerlines of the stroke not just one line as I want.

It sounds like what you are calling the stroke is actually the fill. You should convert your shape to use just a stroke, then it should animate as you are wanting it to. 


Past that, we would need to see what's going on in a demo :) 

  • Like 2
Link to comment
Share on other sites

5 hours ago, Devotee007 said:

Is it the way it's drawn

Yes. ;)


Good SVG animation comes down to three things:

  1. asset prep
  2. asset prep
  3. asset prep

As Zach mentioned, it sounds like you're trying to animate a filled path thinking it would just be a stroke, but you're getting the outside strokes of the path. How to proceed depends on what you're trying to animate. Maybe put together a demo for us.


  • Like 1
Link to comment
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.
  • Create New...