Animated Clock based on an old sign, Huh?!

Apr 4

A while ago I saw this sign outside an old estate agents in Dublin. I really liked the look of it. It was old fashioned, dirty and a bit stange not unlike myself.

I want my own

So I jumped into Adobe Illustrator and started throwing up some shapes till I got it looking similar.

For the name, I changed it to my own!
Now, the only problem is my name isn’t as tall as a name like Tom O’Higgins, I don’t have any descenders like that beautiful double ‘g’, so I couldn’t play with the heights the same way. But I wanted it to have a slightly off-kilter look like old signs that were handmade often do.
So I played with the kerning and stretched and smushed it a tad.

for the other text that says ‘Estate Agents’ in that quaintly sized blocky typeface I didn’t know what to write so I just wrote. “Alright Youwell?” a phrase I am known to say on the regular.

Animation Station

Unlike the real clock I wanted mine to move. So went over to After Effects and created some hands and created a fairly simple animation.

Hmm I don’t like it

The movement was too smooth, it didnt really have that clock feel. So I jumped into the expressions laid down some simple js based on the work of a one Harry Frank Check him out if you wanna learn some AE expressions.

Tick Tock Code for the hand

freq = 30; 
amp = 5;
decay = 8;
rTime = Math.floor(time);
t = time - rTime;
(rTime*6) + ((Math.sin  (t*freq) *amp) / Math.exp(t*decay))
 

After I got it tickin’ and a tockin’, I then added some textures, grimed it up, bevelled the edges added shadows and the like till I got it looking like this.

Clock Animation video

Finished

There she is. An exactly one-minute timer with my name on it based on an old sign for an estate agent in Dublin. Thanks for reading ;)

after effectsanimationjs

Donal Paul Moran