DrawSVG on path with varying width

[samwatts1988]

Hi there! I'm using DrawSVG for the first time and the basic setup all seems pretty straightforward, but I'm trying to reveal a continuous path which varies in width, so applying a stroke over the top of the path and revealing it isn't necessarily working as smoothly as hoped as it means that other parts of the path become revealed slightly sooner in the sequence than they should be (see CodePen for reference). 

 

Is it possible to reveal this kind of path smoothly in DrawSVG? If so, would it affect the way the SVG needs to be prepared prior to animating with GSAP/DrawSVG, or should it be possible to achieve a smooth, continuous reveal of that path through GSAP/DrawSVG alone? 

 

Many thanks in advance! 

 

Sam

See the Pen wvNdmLG by samwatts1988 (@samwatts1988) on CodePen

[mvaneijgen]

Hi @samwatts1988

 

Looking at the effect you're going for, you will need a single line path. Right now there are two lines, check your current path in this path viewer. You can see there are two lines (an outer and an inner) 

 

Check out this tutorial our own @Cassie made, I think this is exactly what you're looking for. Hope it helps and happy tweening! 

 

https://www.cassie.codes/posts/creating-my-logo-animation/

 

 

[PointC]

Depending on your artwork, it can sometimes be necessary to break it into pieces for the best result. I wrote about that here:

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

Happy tweening.

 

[Cassie]

Good to see you Craig. 💚

[mvaneijgen]

10 minutes ago, PointC said:

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

D'oh, how could I forget the amazing @PointC articles! 

[PointC]

14 minutes ago, Cassie said:

Good to see you Craig. 💚

Thanks.

I thought I should punch the forum time clock once in a while or Jack will revoke my Mod badge. 😉

[samwatts1988]

Thank you for all your help here! I feel like I’m getting my head around some of the intricacies involved in creating this kind of seamless/gapless sequence using GSAP, however I just had a couple of follow up queries on this. 

 

Our mask has been divided into separate pieces as per the @PointC article you kindly pointed me towards, however it doesn’t seem to be playing ball just yet and is still resulting in gaps in the sequence I’ve been working on (see updated CodePen below). 

 

See the Pen jOdwRJa by samwatts1988 (@samwatts1988) on CodePen

 

I’m just trying to get my head around where the gap in my understanding is on this. I understand that linear easing needs to be applied to certain parts of the reveal, but I just wanted to first check I’ve structured the SVG/masking correctly as I think this might be the part I’m actually struggling with, and to get a better grasp of what steps I might need to take in order to resolve if so. 

 

Really appreciate any further pointers on this and many thanks again for the help so far!

[mvaneijgen]

Right now your issue is fully explained in @PointC their article read from the title "A Real Letter" and then the solution at title "Break It Into Pieces", you'll have to split your design up in as many pieces so you can fix the overlapping issues. Right now you're design is one shape

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

You also have the issue that some of your shapes are drawn in the wrong direction, check 

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ 

 

As far as I know if you want no ease, set ease: "none", GSAP is probably smart and will do it also with your way, but I like to be better save than sorry. See here a list of all the eases https://gsap.com/docs/v3/Eases/ 

 

Hope it helps and happy tweening! 

[PointC]

Yep - @mvaneijgen is exactly right. You have multiple masks but the artwork is still one piece. That will need to be broken into at least 4 pieces as you have 3 overlaps. Each piece then needs its own mask. 

 

As I mentioned at the end of my article - it can be a time consuming process to break all the artwork into pieces so you have to weigh that time against the client's goals. Of course if you're billing by the hour, take your time. 😜

 

Best of luck.