DrawSVG and SVG Text Element

[JustinBinAz]

Hello All,

 

I see a lot of Codepen examples that show DrawSVG being used on SVG paths, whether those paths form text or another graphic altogether. Is it possible to use DrawSVG to animate the stroke of an SVG text element just as you would animate an SVG path?  If so does anyone have a link to a Codepen that I could check out as an example?

 

Thanks in advance!

[PointC]

HI @JustinBinAz

 

Welcome to the forum and thank you for joining Club GreenSock.

 

I assume you're talking about an actual SVG text element and not converting that to a path? You can't do that with DrawSVG since it's not a path, but you might be able to make it work by animating the stroke-dashoffset. 

 

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

I would not recommend this for production though. My advice would be to convert your text to paths in your vector software and you'll be good to go with DrawSVG. The above technique gets really weird when you start changing the SVG size and font size.

 

Hopefully that helps. 

 

Happy tweening and welcome aboard.

 

 

 

[JustinBinAz]

Thank you for the response, that answers my question perfectly