Jump to content
Search Community

Animate a handwritten signature

Les Vikings test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys!

 

I'm working on a project for which I'd like to animate the drawing of a handwritten signature. The desired effect is to have it like it's being written.

 

Here is the base file: cq5dam.web.730.415.jpeg

 

I tried to vectorize the image using Illustrator, which worked, but the paths that are created are "looped", meaning that it's not one stroke. Thus, when I stagger the paths, they appear to do a "round-trip" around the letters.

 

Do you know of a way that would allow me to animate it in one stroke? Preferably one that doesn't involve redrawing the whole signature manually :P

 

Thank a lot in advance.

See the Pen XpVbVb by tilvalhall (@tilvalhall) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the detailed question and demo.

 

The problem is that your signature is made of a fill that has variable widths. As you learned from your demo, DrawSVG will only animate the stroke around those fills.

 

One technique that will be a bit tedious but may work is to draw a thick stroke over signature and set it as a <mask>. You would then do a DrawSVG animation that would make the mask grow and thus reveal the signature underneath it. 

 

Here is that technique applied to a single letter that appears to use a brush stroke: http://codepen.io/GreenSock/pen/YwawOX?editors=1010

Here is that same demo with the <mask> path "un-masked" http://codepen.io/GreenSock/pen/EZooqB?editors=1010

  • Like 4
Link to comment
Share on other sites

  • 2 years later...

That's because your artwork is outlined - it's not a single stroke that goes through the center of each letter. For example, I added a copy with a red stroke here: 

See the problem? Animating that stroke isn't going to unveil the artwork underneath as you'd expect. You'll need to adjust your artwork accordingly, like draw a path over the top (NOT around the outline). 

 

Happy tweening!

 

  • Like 2
Link to comment
Share on other sites

Hi @jp_uk81 :)

 

The problem is you're using a closed (filled) path and adding a really thick stroke to your mask path. That can work in some situations, but ideally you'd want an open path to act as your mask and use a stroke-width just wide enough to cover the underlying artwork. With the filled path you are currently using, a stroke is added to the outside of the path and not producing the results you want. Here's a fork of pen so you can see what's happening. I've just used your mask paths and a red stroke to highlight the issue.

 

 

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

See what I mean?

 

Animated signatures and handwriting can be a bit tricky. I wrote a couple posts about it:

https://codepen.io/PointC/post/animated-handwriting-effect-part-1

https://codepen.io/PointC/post/animated-handwriting-effect-part-2

 

Here's the demo from the tutorial.

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

 

You can follow the same handwriting technique to create the actual font or for use as a mask. Hopefully that helps a bit. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Very cool example, PointC! Does anyone know of a way to dynamically convert a text string to an SVG for animating drawing the text? I'm aware of some libraries like this - https://www.npmjs.com/package/text-to-svg but everything I've seen converts text to outlines rather than a solid path like PointC's awesome example above.

 

Here's a codepen that shows text conversion to SVG from my nodejs app. What I'd love to know is if GSAP has some nifty tool to dynamically convert the fill itself to a path that can be drawn using drawSvg. The only way I know to convert a font's vector data into an svg results in outline paths with a fill so drawSvg ends up drawing the outline paths.

 

The example above (PointC's Draw Signature codepen) is exactly what I need to get to. Is there anything like MorphSvg.convertToPath() that will convert a path with a fill into a path that results in a single draw path?

 

See the Pen MxxVVP by swampthang (@swampthang) on CodePen

 

Edited by swampthang
more detail
Link to comment
Share on other sites

I don't know of any automated ways to make that happen. That's why I wrote about the manual process in Adobe Illustrator. It's even trickier when you want to simulate handwriting in which the natural move for some letters is to go back over the same segment twice.

 

I suppose you could manually create an alphabet library of cursive letters and then dynamically create the handwriting. 

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

I wonder if there's a way to create a variable sized pen-nub that would act like a pin-ball inside each of the closed path points and create new paths that sort of bounce around and "scribble in" the fill area? If the pen-nib were smaller, it would take more paths and if the nib were larger, it would take fewer. For me that's a new brain cramp but seems like something that one of you brainiacs might be able to pull off!

Link to comment
Share on other sites

Good stuff @mikel. I've seen a few of those techniques mentioned in other articles. Some come close, while others make a complete mess of the artwork. In any case, you're doing the bulk of the heavy lifting in your vector software.

 

I mainly use the technique to animate handwriting which presents a whole lot of challenges beyond simply finding the center line between the outside strokes. I think creating your own library would probably be the best approach and yield the cleanest results. You'd then just type out the text you wanted, grab the path data from your library and measure out the BBox to line it up. I don't think it would be too hard — just a bit time consuming.

  • Like 2
Link to comment
Share on other sites

Yea, PointC, you're right on needing more control over these. I created a codepen using the hersheytextjs sample linked above and added drawSVG. It's pretty ugly. 

See the Pen jJJKdB by swampthang (@swampthang) on CodePen

Now I'm trying to find out how to do what you mentioned... 

 

16 hours ago, PointC said:

I think creating your own library would probably be the best approach and yield the cleanest results. You'd then just type out the text you wanted, grab the path data from your library and measure out the BBox to line it up. I don't think it would be too hard — just a bit time consuming.

 

I'm thinking we might hire someone to come up with a few font libraries but I'm not sure how to incorporate this. PointC, do you mind "Point"-ing me in the right direction? My first thought is to create an SVG font and find a way to connect the alphabetic characters to them. I'm just not very familiar with how this is done.

 

I think if there were a few fonts available to GSAP users this could be a very popular option. Would still love to find a reliable way to convert a ttf into a single-line font.

Link to comment
Share on other sites

I think you could either pick a font and trace it like I did in my tutorial or have someone grab a tablet and create perfect handwriting. It's really more about asset prep than coding. The trick will be joining the letters to look like continuous handwriting. Here's a really quick example:

 

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

 

I just made four letters in AI and used the d attribute data to drop the word into the SVG. You can see that my spacing is off a bit, but for a quick pass it's not too bad. That's the big challenge. Either perfectly spaced letters or maybe all letters are created so the start point of one overlaps the ending point of the previous? I haven't really thought too much about it yet. This was just a first run. 

 

The other thing to consider would be letters like 'g', 'j', 'p' hanging below the text baseline. I think you'd probably have to store some positioning data with the d attribute in the letter library. Plus you have to dot the i's and cross the t's. ;) If you're incorporating capital letters, numbers and punctuation, that would also raise the degree of difficulty.

 

You can see that the actual code to loop though and measure things is pretty simple. It all comes down to artwork prep. Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Cool. Keep us posted. I'd love to see what you come up with.

 

I've used the technique on a few client and personal projects, but I just type out what I need and pencil over it in AI. I've gotten pretty quick at tracing, but If I had a bunch of free time right now, I'd probably work on a cursive alphabet library to make things easier. 

 

Here's another one I used for cursive menu button text.

 

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

 Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

I've figured out a way to sort of simulate line drawing of outline text by:

  • using mainly thin fonts
  • set the stroke to transparent
  • fade in the fill over the same period of time the drawing tool draws in the stroke.

Below is a video I exported from my app that results from doing just that. 

 

I am using an npm module called vectorize-text to convert text to svg paths. It works great but due to its asynchronous array assembly the letter paths get returned all out of order. One of the cool things about that library is the option to support line breaks in the string that gets passed to it. In the video example below, it's easy enough to sort the letters by x coordinates using MorphSVGPlugin's pathDataToBezier function because there's only one line. But that falls apart when you start with a wad of paths on various lines that can be in any order. But, once I figure out how to sort by x/y (I'm using Lodash) I think I'll have this licked. Here's a codepen where I'm trying to accomplish this. For the codepen, I just stuck to simple drawing in of the stroke WITHOUT the "slight of hand" - excuse the pun ;-)

 

Anyone know right off how to resort the paths so they're in order?

 

See the Pen vPoNgV?editors=1010 by swampthang (@swampthang) on CodePen

 

 

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.
×
×
  • Create New...