Draw a line along SVG path - MorphSVG or DrawSVG?

[traummaschine 1 Likes (Newbie)]

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!

[PointC 8,599 Likes (Superhero)]

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:

http://greensock.com/club/

 

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.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that gets you started and helps a bit.

 

Happy tweening and welcome aboard.

[Carl 9,066 Likes (Superhero)]

Love seeing that demo being put to such great use, Craig!

 

Just because it's already made I'll throw this one into the mix: http://codepen.io/GreenSock/pen/obQbjb same exact concepts. 

[traummaschine 1 Likes (Newbie)]

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.

[PointC 8,599 Likes (Superhero)]

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:

http://greensock.com/forums/topic/13829-drawsvg-onupdate-to-get-current-percentage/

 

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

 

Happy tweening.

[traummaschine 1 Likes (Newbie)]

Superb - I hadn't encountered tweening counters before - thanks again!