Free Animated Signature Template for After Effects

Get rid of those boring email signatures with an animated update.

About a year ago I had this idea to make myself an animated email signature as .gif is suported by most browsers and email clients... and so I did. I animated a signature type font in After Effects into a really cool .gif, added some line icons around the contact details and after a week or so of sending emails back and forth I realized that my animated email signature was a breakthrough and all my clients and friends who saw my email signature wanted one. And here comes the fun part:

Initially I've spend like an hour to make the first piece for myself but now I was facing like 20 pieces to go, all kinds of names with different characters and I needed to somehow simplify, maybe automate the process. After some trial end error (I was trying to mask and reveal text from an image, duh!) I decided that I was going to pen tool the entire font, animate the stroke and have all that so you don't have to... and so i did. It was a tedious process but my pen tool skills are pretty on point so it was all done in about 2hours. Below you can see the the final project file where the magic takes place.

Play Video

The usage of this is pretty straight forward:

  • you just drag the first letter into the viewport, move the timeline where the animation of the first letter stops and drag and place the next letter.
  • all the letters are placed in a separate composition and every letter animates individually.
  • as long as the compositions are aligned horizontally the letters should work perfectly, no needing for vertical adjustment for individual letters. As you can see in the example above all the compositions are aligned except for the one who has the coma for the t.
  • when animating you would like to keep in mind that if you have two words it would be nice to have a larger animation brake between the words to give it a natural feel.
  • when exporting for email I use After Effects frame by frame export, open all frames in Photoshop as a sequence (it’s only a checkbox) and save as a .gif with the option to play only once so when you open the mail, the signature plays until the end and it stops at the last frame.

More Examples

In the top example a lottie .json file is used. I use lootie for web development often because I have more control over the animations, they are vectors, and they are verry small in size.

In the top example there is a .gif file and this is what I finally used for the clients email signature because it could render in all browsers and it can play only one loop when it loads.

With this beeing said, you can download the source file below and have fun with it. If you have trouble setting up this project you can contact us at hello@pixelo.ro

Suntem destul de ocupați și dorim să lucrăm selectiv la proiecte în care promitem să ne implicăm 100%. Ne poți spune hello@pixelo.ro sau folosind form-ul de mai jos.