DrawSVG help

[cwiens]

I am trying to create a "handwriting" type effect here and when I animate this it is way too complex. http://cwiens.com/curt/shutterfly_holiday_2016/test/ I am wondering if anyone knows how I can prep this .svg so it animates more like handwriting.

 

 

See the Pen PzApmQ by cwiens (@cwiens) on CodePen

[Carl]

i zoomed into your SVG

 

 

and it appears you have a thick stroke on a fill instead of just a single stroke for each segment of each letter. 

Unfortunately I don't think your artwork lends itself to be easily revealed by DrawSVG..

 

I think it would still be tedious, but here is a demo that uses DrawSVG on a mask that reveals a complicated brush stroke:

http://codepen.io/GreenSock/pen/YwawOX

[PointC]

Hi cwiens@shutterfly.com 

 

Yeah - that lettering is a tough one for drawSVG and a mask is going to be a lot of work.

 

The only other thought I had was changing your stroke to something quite thin like 0.25 and then animating the fill of each path as the stroke finishes. It may not be even close to what you wanted, but here's a fork of your pen:

 

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

 

Hopefully that helps a little or you may have a lot of masking ahead of you. Good luck.

 

Happy tweening.

[cwiens]

Thanks guys, yeah I put the thicker stroke on to see if I could use fill:none and animate the stroke. I figured this was too complex. Thanks for the feedback so I can take a different approach!