In part 1 of this post, I covered how to trace a cursive font with the pencil tool in Adobe Illustrator to create an animated writing effect. You’ll need some open paths with a stroke to make this work.
In part 2, I’ll show you how to animate the drawing of the path strokes. We’ll also be adding an element that follows the paths and moves from the end of one path to the beginning of the next one.
I used GreenSock’s animation platform for this process. Specifically, GSAP core and my favorite plugins:
Necessary GSAP Plugins
- DrawSVG: this will be the main workhorse that draws the path. Yes, you can make the JavaScript calculations on your own, but this plugin deals with several browser fussiness issues that would normally drive you crazy.
- MotionPathPlugin: this is a new plugin in GSAP 3. It makes it super easy to make elements follow a specific animation path. Hmmm…. sounds like the perfect way to move a hand or pencil along our handwriting path.
Drawing the paths
The DrawSVG plugin makes drawing SVG strokes incredibly easy. Say you have a path in your SVG like this:
<path id="path1" d="M169.2,107c-.71,70.36,47.26,138.58,113.71,161.71s146.42-.56,189.55-56.15c17.44-22.48,29-49,45.37-72.22s40-44.08,68.32-46.44c24.27-2,47.89,10,66,26.36s31.74,36.83,46.67,56.07c25.95,33.43,56.77,64,94.37,83.42s82.7,26.77,122.9,13.54,73.74-49.21,77.86-91.33" fill="none" stroke="#fff" stroke-linecap="round" linejoin="round" stroke-miterlimit="10" stroke-width="4"> </path>
Assuming you have all the JavaScript files loaded, you can animate it with one tween:
gsap.fromTo(
"#path1",
{ drawSVG: 0 },
{ duration: 1, drawSVG: true }
);
That’s all you need to do for your handwriting paths. Next, you sequence all the tweens on a timeline and the paths draw on one by one for a cool handwriting effect.
You could stop right there and have a nice animation, but what if we could have a hand, pencil or paintbrush follow the path and look like it was writing it? Getting an element to follow along the path as it draws takes a bit more work, but it’s not too hard.
Follow the path
To animate the target along the path, you simply create a tween and have it follow our path by using the MotionPathPlugin like this:
// in this case, our target is a simple circle, but you can use anything
// including groups or images... well, anything...
gsap.to("#target", { duration: 3, motionPath: { path: "#path1" } });
Next, we put the draw effect and motion path together. In the following demo, you’ll see the target circle follow path 1 and then move to the beginning of path 2. Path 2 draws its stroke as the circle animates along it. This is done by starting the two tweens at the same time on the timeline. Smooth and easy.
See the Pen Follow path then tween to new path GSAP 3.0 by Craig Roblewsky (@PointC) on CodePen.
Extra position data
Okay, great. We’ve got a target moving along a path and it draws a stroke as it moves, but wait a minute… there’s a couple extra tweens in there that animate to some strange x/y position. What’s that about? Uh-oh! Is there gonna be math? Or something super complicated that involves an abacus?
Nope. It’ll be easy. Those are just the starting coordinates of the next path. Once the circle target finishes its run along path 1, we don’t want it to just snap to the beginning of path 2. We need to tween it over there. Where do these coordinates come from?
If you check the d attribute of path 2, you’ll see the starting coordinates of x:160.52 and y: 479.74. I’ve truncated the remainder of the data for clarity.
<path id="path2" d="M160.52,479.74"/>
Plug that data into a tween and that’s how you make your target move from the end of one path to the beginning of the next path. That comes in really handy when you move from one handwritten word to the next.
Whether you have two paths or twenty, you can have it move to the next path gracefully rather than snapping over there. You’ll notice in the above demo, I also tween back to the start of path 1 at the end of the timeline. This creates a nice seamless loop.
Putting it all together
I’ve shown you how to draw the stroke of the paths and have a target element go along for the ride. Now all you need to do is sequence your handwriting paths and whatever element you’d like to simulate the drawing.
Let’s assume we’ve made notes about the starting x/y position of path 2. You just need to sequence all the tweens on a timeline to put it all together and make it work. It looks something like this:
gsap.registerPlugin(MotionPathPlugin);
gsap.set("#target", {
yPercent: -50,
xPercent: -50,
transformOrigin: "50% 50%"
});
gsap.set("#path2", { drawSVG: 0 });
const tl = gsap.timeline({ repeat: -1 });
tl.to("#target", { duration: 3, motionPath: { path: "#path1" } });
tl.to("#target", { duration: 2, x: 160.52, y: 479.74 });
tl.add("label");
tl.to("#path2", { duration: 3, drawSVG: true }, "label");
tl.to("#target", { duration: 3, motionPath: { path: "#path2" } }, "label");
tl.to("#target", { duration: 2, x: 169.52, y: 107 }, "end");
tl.to("#path2", { duration: 1, autoAlpha: 0 }, "end+=1");
The final result
Just for fun, I’ve added some speed and stroke color controls to my version. It looks more complicated but most of the code is related to the controls. If you look at the actual timeline, you’ll see it’s the exact same procedure that I demonstrated above with the two paths and the circle target element. Draw along a path, tween to the next, draw along a path, tween to the next, etc. Here’s my final version:
See the Pen Animated handwriting with DrawSVG (GSAP3) by Craig Roblewsky (@PointC) on CodePen.
Final thoughts
You can use this technique to make some nice animated handwriting effects, but it can be used for so much more. Create a pencil icon that draws a set of blueprints or a pair of shoes that follow a path on a map. Imagine the possibilities!
I hope you found some of this useful. See ya next time. Keep those pixels movin’.
