Guide · 6 min read

How to animate your signature, three ways.

A signature animation shows your signature being written, stroke by stroke, as if by an invisible pen. Here is how to make one in After Effects, in a phone editor like CapCut, or in a few minutes in your browser, and which to choose.

Updated

What makes a signature animation look real

The convincing ones follow the pen: each stroke grows from where you started it to where you lifted the pen, in the order you wrote them, with a short pause between strokes. A left-to-right wipe or a fade reveals the whole signature at once, which reads as a transition rather than handwriting.

Three more details matter: the pace (a natural hand is quicker on long, straight lines and slower on loops), a hold of a second or two on the finished signature, and a clean edge where the ink meets the background so it sits well over video.

Way 1: Draw it in your browser (a few minutes)

This is what Everstroke is built for. Because you draw the signature on screen, it already knows every stroke, its direction and its order, so it can replay your hand exactly.

  1. Open the drawing pad and sign with a finger, mouse, trackpad or Apple Pencil. To match your real signature, put a photo of it under the pad and trace it.
  2. Turn on Steady hand if the lines wobble, and reshape any curve by its points.
  3. Pick one of seven looks (see the examples), set the pace and the hold, and optionally add a line like “Photography” under it. The reveal can run from 1 to 8 seconds.
  4. Choose where it’s going: Reels and TikTok, CapCut, Final Cut or DaVinci, a website, or an email signature. You get the right file for that place.

Drawing and previewing are free and need no account. Downloading the files uses one signature from a one-time pack.

Way 2: After Effects with masks and the Stroke effect

After Effects gives you the most control, at the cost of time: expect an hour or more for a long signature. The usual method reveals a scan of your signature along paths you draw over it.

  1. Sign on white paper with a thick pen, scan or photograph it in even light, and remove the background so you have a transparent PNG (see how to make a transparent signature PNG).
  2. Import the PNG into a composition and select its layer.
  3. With the Pen tool, draw an open mask along the middle of the first stroke, in the direction you wrote it. Set the mask mode to None.
  4. Add Effect, Generate, Stroke. Point it at that mask, set Brush Size a little wider than the ink, and set Paint Style to Reveal Original Image.
  5. Keyframe the Stroke effect’s End from 0% to 100%. That stroke now writes itself out.
  6. Repeat for every stroke with its own mask and Stroke effect (tick All Masks, or duplicate the layer per stroke), offsetting each in time so they play in order.
  7. Ease the keyframes, add a hold at the end, and render with alpha (for example ProRes 4444) to use it as an overlay.

Tip: Where strokes cross themselves, the brush can reveal ink from the other part of the stroke early. Split those strokes into two masks at the crossing.

Way 3: A mask wipe in CapCut or another phone editor

Phone editors don’t trace strokes, but a moving mask gives a quick write-on feel for short, mostly left-to-right signatures.

  1. Add a transparent PNG of your signature to your project as an overlay.
  2. Select it, open Mask, and choose Linear. Rotate the mask so its edge is vertical.
  3. Add a keyframe with the mask edge left of the signature, move forward a second or two, and add a keyframe with the edge past the right side.
  4. Feather the mask a little so the edge isn’t hard.

This reveals every letter from left to right at once, so loops and crossbars appear before the pen would have reached them. For a true stroke-by-stroke reveal in CapCut, use an animated overlay instead: see how to add a signature animation in CapCut.

Which way should you choose?

  • You want it today, for Reels, an email signature or a website: draw it in the browser.
  • You already edit in After Effects and want frame-level control over every stroke: use masks and the Stroke effect.
  • You need a rough effect for one video and only have your phone: a mask wipe in CapCut.

Tip: Whichever you choose, use a stylized signature for your brand rather than the one you sign contracts with.

Questions

Frequently asked questions

Can I animate my real signature from a photo?

Yes. In After Effects you reveal the photo along masks. In Everstroke you trace the photo on the drawing pad; the photo stays on your device and only your traced strokes are used.

How long should a signature animation be?

Two to four seconds of writing plus one to two seconds of hold suits most intros and outros. Longer signatures can take a little more.

What format do I need for Instagram Reels or TikTok?

An MP4 in 9:16 at 1080 × 1920. For laying it over your own footage, use an overlay MP4 with a blend mode, or a video with a transparent background.

Is there a free way to animate a signature?

The CapCut mask wipe is free. In Everstroke, drawing, styling and previewing are free; downloading uses one signature from a one-time pack.

Skip the keyframes.

Draw your signature and watch it write itself, free