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".

<div id="upperPart">
</div>

<div id="lowerPart">
</div>

Next we add the images. Here is a scheme with the id’s I’ve used:

<div id="upperPart">
    <img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png" />
    <img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png" />
    <img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png" />
</div> 
<div id="lowerPart">
    <img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png"/>
    <img id="minutesDownLeft" src="Double/Down/Left/0.png" /><img id="minutesDownRight" src="Double/Down/Right/0.png" />
    <img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" />
</div>

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.

<div id="back">
    <div id="upperPartBack">
        <img src="spacer.png" /><img id="hoursUpBack" src="Single/Up/AM/0.png" />
        <img id="minutesUpLeftBack" src="Double/Up/Left/0.png" /><img id="minutesUpRightBack" src="Double/Up/Right/0.png" />    
        <img id="secondsUpLeftBack" src="Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="Double/Up/Right/0.png" />
    </div>
    <div id="lowerPartBack">
        <img src="spacer.png" /><img id="hoursDownBack" src="Single/Down/AM/0.png" />    
        <img id="minutesDownLeftBack" src="Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="Double/Down/Right/0.png" />
        <img id="secondsDownLeftBack" src="Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="Double/Down/Right/0.png" />
    </div>
</div>

<div id="front">
    <div id="upperPart">
        <img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png" />
        <img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png" />
        <img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png" />
    </div>         
    <div id="lowerPart">
        <img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png" />
        <img id="minutesDownLeft" src="Double/Down/Left/0.png" /><img id="minutesDownRight" src="Double/Down/Right/0.png" />
        <img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" />
    </div>
</div>

Here is the complete .html file with reference to the stylesheet and the javascript file "animate.js" in which we will create the animation.

<html>
<head>
<title>Create an Animated Flip Down Clock</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="wrapper">
	<div id="back">
		<div id="upperPartBack">
			<img src="spacer.png" /><img id="hoursUpBack" src="Single/Up/AM/0.png" />
			<img id="minutesUpLeftBack" src="Double/Up/Left/0.png" /><img id="minutesUpRightBack" src="Double/Up/Right/0.png" />    
			<img id="secondsUpLeftBack" src="Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="Double/Up/Right/0.png" />
		</div>
		<div id="lowerPartBack">
			<img src="spacer.png" /><img id="hoursDownBack" src="Single/Down/AM/0.png" />    
			<img id="minutesDownLeftBack" src="Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="Double/Down/Right/0.png" />
			<img id="secondsDownLeftBack" src="Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="Double/Down/Right/0.png" />
		</div>
	</div>
    
	<div id="front">
		<div id="upperPart">
			<img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png" />
			<img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png"/>
			<img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png"/>
		</div>         
		<div id="lowerPart">
			<img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png"/>
			<img id="minutesDownLeft" src="Double/Down/Left/0.png"/><img id="minutesDownRight" src="Double/Down/Right/0.png" />
			<img id="secondsDownLeft" src="Double/Down/Left/0.png"  /><img id="secondsDownRight" src="Double/Down/Right/0.png"  />
		</div>
	</div>
</div>

</body>
<script src="mootools.js" type="text/javascript"></script>
<script src="animate.js" type="text/javascript"></script>
</html>

Step 4: CSS

The main thing we have to do now is to overlap the “front” and “back” divs. First we position the main wrapper where we need it and then give the same absolute position to both containers.

#wrapper{
	position:absolute;
	top: 100px;
	left:400px;
}

#front, #back{
	position:absolute;
	top:0px;
}

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.

#upperPart, #upperPartBack{
	vertical-align:bottom;
}

#lowerPart, #lowerPartBack{
	vertical-align:top;
}

#upperPart img{
	position:relative;
	height:63px;
	vertical-align:bottom;
	visibility:visible;
}

#lowerPart img{
	position:relative;
	height:63px;
	vertical-align:top;
	visibility:visible;
}
	
#lowerPartBack img{
	position:relative;
	vertical-align:top;
}

#upperPartBack img{
	position:relative;
	vertical-align:bottom;
}

Finally all we have to do is to constrain the width of the pads because we want to play around only with their height. By default, if you change one of them, the hole image will be scaled.

#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
	width:126px;
}

#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
	width:63px;
}

Here it is all put together:

body{
	background:#000;
}

#wrapper{
	position:absolute;
	top: 100px;
	left:400px;
}

#front, #back{
	position:absolute;
	top:0px;
}

#upperPart, #upperPartBack{
	vertical-align:bottom;
}

#lowerPart, #lowerPartBack{
	vertical-align:top;
}

#upperPart img{
	position:relative;
	height:63px;
	vertical-align:bottom;
	visibility:visible;
}

#lowerPart img{
	position:relative;
	height:63px;
	vertical-align:top;
	visibility:visible;
}
	
#lowerPartBack img{
	position:relative;
	vertical-align:top;
}

#upperPartBack img{
	position:relative;
	vertical-align:bottom;
}

#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
	width:126px;
}

#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
	width:63px;
}

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.

	var h_current = -1;
	var m1_current = -1;
	var m2_current = -1;
	var s1_current = -1;
	var s2_current= -1;

Now we create a function that will run every second and update our clock. First we get the current time and determine the time of day, AM or PM.

function retroClock(){
		
       now = new Date();
       h = now.getHours();
       m1 = now.getMinutes() / 10;
       m2 = now.getMinutes() % 10;
       s1 = now.getSeconds() / 10;
       s2 = now.getSeconds() % 10;
       if(h < 12)
          ap = "AM";
       else{ 
          if( h == 12 )
              ap = "PM";
          else{
              ap = "PM";
              h -= 12; }
       }

Then we compare it to the time shown on the pads and change which group is different. It uses a function called “flip” that I will describe in a minute.

	 
       if( h != h_current){
          flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
          h_current = h;
      }
      
      if( m2 != m2_current){
          flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
          m2_current = m2;
          
          flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
          m1_current = m1;
      }
      
       if (s2 != s2_current){
          flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
          s2_current = s2;
          
          flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
          s1_current = s1;
      }
}//end retroClock

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.

function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
    var upperBackId = upperId+"Back";
    $(upperId).src = $(upperBackId).src;
    $(upperId).setStyle("height", "63px");
    $(upperId).setStyle("visibility", "visible");
    
    $(lowerId).setStyle("height", "0px");
    $(lowerId).setStyle("visibility", "visible");

    

Now we change the back upper and front lower pad to the new value.

	$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";    
   $(lowerId).src = pathLower+parseInt(changeNumber)+".png";

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.

   
    var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
    flipUpper.addEvents({
        'complete': function(){
            var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
                flipLower.addEvents({
                    'complete': function(){	
                        lowerBackId = lowerId+"Back";
                        $(lowerBackId).src = $(lowerId).src;
                        $(lowerId).setStyle("visibility", "hidden");
                        $(upperId).setStyle("visibility", "hidden");
                    }				});					
                flipLower.start('height', 64);
                
        }
                        });
    flipUpper.start('height', 0);		
}//end flip

The final thing to do is to make our main function run every second.

	setInterval('retroClock()', 1000);;

Here it is all put together.

var h_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current= -1;
function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
    var upperBackId = upperId+"Back";
    $(upperId).src = $(upperBackId).src;
    $(upperId).setStyle("height", "63px");
    $(upperId).setStyle("visibility", "visible");
    
    $(lowerId).setStyle("height", "0px");
    $(lowerId).setStyle("visibility", "visible");
    
	$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";    
    $(lowerId).src = pathLower+parseInt(changeNumber)+".png";
    
    var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
    flipUpper.addEvents({
        'complete': function(){
            var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
                flipLower.addEvents({
                    'complete': function(){	
                        lowerBackId = lowerId+"Back";
                        $(lowerBackId).src = $(lowerId).src;
                        $(lowerId).setStyle("visibility", "hidden");
                        $(upperId).setStyle("visibility", "hidden");
                    }				});					
                flipLower.start('height', 64);
                
        }
                        });
    flipUpper.start('height', 0);		
}//end flip
    
            

function retroClock(){
    
     now = new Date();
     h = now.getHours();
     m1 = now.getMinutes() / 10;
     m2 = now.getMinutes() % 10;
     s1 = now.getSeconds() / 10;
     s2 = now.getSeconds() % 10;
     if(h < 12)
        ap = "AM";
     else{ 
        if( h == 12 )
            ap = "PM";
        else{
            ap = "PM";
            h -= 12; }
     }
     	 
     if( h != h_current){
        flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
        h_current = h;
    }
    
    if( m2 != m2_current){
        flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
        m2_current = m2;
        
        flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
        m1_current = m1;
    }
    
     if (s2 != s2_current){
        flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
        s2_current = s2;
        
        flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
        s1_current = s1;
    }
}//end retroClock

setInterval('retroClock()', 1000);

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!

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.