Jump to content

Alexandra Spalato

handwriting effect

Recommended Posts


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!

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.