2020 Update - these articles have been fully updated to use GSAP3 code and moved to my training site. Motion Tricks

Animated Handwriting Part 1

Animated Handwriting Part 2

SVG Calligraphy Handwriting

Hello everyone. I volunteer some time on the GreenSock forums as a moderator and I've seen several questions about creating a handwriting effect so I thought I'd write a post about the process I use.

In part 1, I'll show you how to make open paths from a font in Adobe Illustrator. In part 2, I'll show you how to animate the words and have an element follow along to simulate the drawing.

How do we create a handwriting effect?

So, you want to make this effect and maybe even have a hand, pen, paintbrush or some other icon look like it's drawing? I'm going to explain my process for making the open paths necessary for this to work well. Is my way the best? Who knows? I'm kind of a goofball, but it works for me and hopefully you'll get something out of it. I'm assuming a working knowledge of Adobe Illustrator and won't be discussing any of its usage in depth.

Maybe use your own handwriting?

If you have great penmanship and a tablet, I say go ahead. Write something out and you’re ready to animate so you can skip the first few steps of recreating a font.

I've forgotten most of my elementary school cursive writing lessons so my penmanship looks like a combination of cursive, block print and some sort of ancient alien hieroglyphic symbols found at the Roswell crash site so that’s a no-go for me. Even if you have exquisite handwriting, you may not have a drawing tablet and it can be a bit tricky to write with a mouse. So, what do you do?

Pick a font

Find a cursive font that you like. I’m using HaloHandletter Bold. This whole process works best if you use a font that has an even width stroke throughout the letters. If you want to use some calligraphy fonts with varying width strokes, I’d use a mask instead of the method I'm about to describe. Here's what we'll try to create with open paths.

You might think it’s as simple as creating outlines from the font.

That looks kind of weird and probably not what we want. For some block letters, you may want an outside stroke to animate and then fade-in the fill, but for handwriting, that’s not quite right.

Use the pencil tool

Let’s lock down the text layer, create a new layer for our paths and see how we can make this work. I like light text on a dark background for this type of process, but do whatever works for you.

What we need to make this work is an open path down the middle of these letters. The pencil tool is good for that. Double-click the pencil tool and crank the fidelity smoothness up to the max.

Now, all you do is trace the font as best you can. Remember to draw in the order you would for cursive writing. For this word, I have four paths. Two for the capital ‘H’, one for the main body of the word and one for the cross in the ‘t’.

You don’t have to make it perfect. Just get as close to the center as you can. You also don’t need to do it all in one pass. Feel free to stop/start and zoom in/out. You can just keep adding to the end of the path. You will retrace your path coming back down letters like the ‘t’ and ‘i’s. That’s perfectly fine and exactly what we want. Remember, we’re trying to simulate someone writing here and you do go over the same areas twice with cursive writing. Here’s my first pass:

Not too bad, but now we can start pushing points around to make it match the font. Before we do that, I recommend adding the stroke to the paths and setting the opacity of your path/stroke layer to around 75% so we can see the font layer. I chose a green, but use a stroke color that works for you. You can always change it in the final animation. In this example, I used a 10pt stroke for all the letters except the first part of the ‘H’ which was a bit thicker with a 14pt stroke. Use whatever is closest to your guide font.

You’re now going to see something that looks like a mess with strange peaks where the curve was tight or passed over itself. Not to worry, it’s an easy fix.

For the oddball peaks, you can easily fix it with the Live Corners widget. Use the Direct Selection tool and click on one of those problem child points and you’ll see something that looks like a little target. Double-click that to use the widget. You’ll now have a nice little curve you can drag where you need it.

Time to push and drag points

After that, you can start pushing/pulling your points around to line up the path(s). I’m not going to go into adjusting points and Bezier handles as it’s not the focus of this post. There are numerous training resources on the web for that information.

How long will this adjustment process take? That will depend on your experience level in moving points around. If you’re an old pro in AI, it may take a matter of minutes. If you’re new to it, it’ll probably feel like you're trying to wrangle spaghetti noodles in a swimming pool and may take an hour or more.

Fewer is better when it comes to points, but if you need to add one or two to make it work, go for it. My final version is not a perfect match, but it’s close enough for me.

Here’s a side by side comparison of the real font and my new path with a 10pt stroke.

Now the fun part. It’s time to animate. Be sure to name your paths and get your SVG over to your favorite code editor. You can do the animation by getting the path length and animating the offset with plain JavaScript, but I’m going to be using GreenSock’s TweenMax along with the DrawSVG and MorphSVG plugins.

Let's make it animate

Animated handwriting effect (part 2)