Learn how to Create a Retro Animated Flip-Down Clock

In this tutorial, we will create an animated flip down clock inspired by the 70's. Using the Mootools framework, I tried to replicate the flip action of the pads and make it as lifelike as possible. With it's retro styling, it could be a really neat thing to add to your website, so let's get started!

Tutorial Details

Program: Mootools

Difficulty: Easy

Estimated Completion Time: ~ 1 hour

Step 1: The Main Concept

The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the "flip" effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes. Here is the basic scheme.

Step 2: Photoshop

First, we must create our images.

Select the "Rounded Ractangle Tool" (U), set the radius to 10px and the color to #0a0a0a and create a 126px by 126px ractangle, you can change the dimension according to your needs, just keep them an even number. Resterize the shape by going to Layer > Rasterize > Shape or Right Click > Rasterize Layer. Now we want to create that "gap" between the two parts and make the upper background a little bit lighter. Place a guide line at the horizontal half of our pad, then select the hole pad (Ctrl + Click on the layer icon) and with the Rectangular Marquee Tool (M) select the upper half in intersect mode (hold Shift + Alt). Now we just have to fill the selection with #121212 using the Paint Bucket Tool (G). Next trace a 2px, black line using our guide line as help, on a separate layer.

Now we have to add the digits. Using the Type Tool (T) make a new layer with the digits and place it under the line we've created earlier.

Just add a little overlay on the numbers to make them look a bit more realistic. Create a new layer above the digits layer, select the lower part of the pad and fill with #b8b8b8, then fill the upper part with #d7d7d7. Now set the blending mode to "Multiply".

Ok. Now that we have our completed pad, we have to split it up. The main idea is to split the right digit from the left one, so instead of having 60 images for the minutes and seconds groups, you end up with 20 images that we will use for both groups. So basicly we have to split our pad into 4 images with the same dimensions. I used the Crop Tool (C) for this job.

After you crop the pad, change the digit and save each time as a separate .png so you end up with all the files you need ( numbers from 0 - 9 ). Repeat this step for all parts of the pad. Note that for the hours pad, you don't separate the digits, you have just the upper and lower part. In the end here is our folder structure ("Double" for minutes and seconds, "Single" for hours):

Step 3: HTML Markup

Now that we have our files ready we can start coding. First of all, we need two containers for our images, one for the "upperPart" of our clock and one for the "lowerPart".

I had to use a transparent spacer image that is 1px wide and the same hight as the other images in order to keep the containers from shrinking when the pads flip. Also, there must not be any space between the images from the same group (e.g. "minutesUpLeft" and "minutesUpRight").

Ok. These will be the front pads of our clock that will flip down, now we have to set up the back ones, so when the front pads flip, the new digits can be seen on the them. We will wrap what we've done so far in a div and just duplicate it above itself, adding to each image id the word "Back" and changing to the appropriate source file.

Now we need to vertically align the upper part to the bottom and the lower part to the top, so that the pads would look like they're anchored to the middle of the clock. I added the height and visibility properties for the front parts because we need them for the animation later on.

Step 5: Creating the Animation

First of all we need some variables to store the time that is shown on the pads. Note: h = hours, m1 = the left minute digit, m2 = the right minute digit, s1 = the left second digit, s2 = the right second digit.

Now, the flip function. It has a few parameters: upperId, lowerId = the ids of the upper and lower pads that will flip; changeNumber = the new value that will be shown; pathUpper, pathLower = the paths to the source files for the new value. The animation is composed of the following steps:
The front upper pad takes the value of the back one and it's made visible, overlaing it, while the lower one is also made visible but it's height is changed to 0px.

Having this setup we can start the actual animation. As I mentioned earlier it consists of reducing the height of the front upper part to 0%, 0px, and increasing the height of the front lower part to 100%, 63px in this case. After the animation is complete, the back lower pad takes the new value and the front pads are make hidden.

Finished

We are finished! Hope you've enjoyed working on this little project, it has a somewhat complex concept, but in the end it is a really neat gadget for your websites. Please do not hesitate to send any suggestions you may have!