handwriting effect

[Alexandra Spalato]

Hello,

I'm working on this project https://falconlab.netlify.app/ and the red letters writing effect has been done by somebody else has an svg animated, the svg standalone animation loops. but here it doesn't

so I would prefer to do it with gsap to have a better control

what would be the best way ?

drawSVG plugin ? and in this case how to prepare the svg file

a path for each word

or would it better work with the split text plugin ?

Thanks in advance!

[ZachSaucier]

Hey Alexandra. I recommend checking out the existing forum threads related to creating handwriting effects. Most make use of masks or clip paths as handwriting usually doesn't have consistent stroke width to use DrawSVG and SplitText wouldn't give you the same effect.

 

[Greg Stager]

Perhaps this is a silly suggestion but I will throw it out there anyway.

 

In my attempts at learning many of the GSAP tools, I was playing with the Motion Path Helper and used it to craft my own signature path by adding in several points and adjusting all the curves as necessary. It took some time but it worked and I was pleased with the result. No need for masks and such.

 

I later used the same strategy to make a thank you to the gang with this pen. Maybe it will foster an idea...?

 

See the Pen poJmrWx by Arelwynn (@Arelwynn) on CodePen