Create an Animated Flip Down Clock

Learn how to Create a Retro Animated Flip-Down Clock

Alexandru Pitea on Oct 21st 2009 with 125 comments

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!


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Alexandru Pitea

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a web designer and developer based in Romania. My interest in this domain started a couple of years ago and since then I'm constantly trying to improve my skills and make my work better.  

Plus Premium
 
 
Add Comment

Discussion 125 Comments

Comment Page 2 of 2 1 2
  1. Sahan says:
    October 28, 2009 at 2:46 am

    Great, Thanks man !

    Reply
  2. mimi says:
    October 28, 2009 at 9:52 am

    nice nice nice nice nice nice nice nice nice nice

    Reply
  3. JJ says:
    October 30, 2009 at 12:30 am

    is it possible to view how it works – demo button or something missing?

    Reply
  4. mosio says:
    October 31, 2009 at 4:47 am

    cooooool.

    I have changed it to a count down. It works fine with firefox.

    http://whitecube.persiangig.com/countDown/index.html

    Reply
  5. Ranga says:
    November 7, 2009 at 10:48 am

    Awsome… Thanks alot

    Reply
  6. zhu says:
    November 8, 2009 at 3:02 am

    anyone has a working countdown flip-down clock? it will be nice if it is countingdown.

    Reply
  7. Holly says:
    November 11, 2009 at 3:28 pm

    Nice work! But, how can I change the size of the images? If I adapt the css, my layers begin to move (lower and upper part, the back layers stay fix). Has anyone a workaround? I don’t see why they move.

    Reply
    • Dan says:
      November 18, 2009 at 7:25 am

      In the CSS just change the width to which your desired size. And in the animate javascrpt file change the height to the same size:

      #minutesUpLeft, #minutesUpRight, ….etc { width:64px; }

      $(upperId).setStyle(“height”, “64px”);
      flipLower.start(‘height’, 64);

      Worked for me!

      Reply
      • Dan says:
        November 18, 2009 at 7:22 pm

        Apologies, but you will also need to change:
        #hoursUp, #hoursDown, #hours… etc { width:125px;

        To scale this to the right size you will need to do the following formula:
        Take the width you set earlier, for example lets use 40px.

        You then need to work out the percentage, so:

        40 divided by 64 = 0.625 x 125 = 78.125
        then round it to the nearest whole number, so your width for the hours would be 78px.

      • Gabi says:
        November 20, 2009 at 5:22 am

        Hi Dan!

        Unfortunately, this does not work in IE.

        Functionality is ok on the other browsers but not on IE.

        Thanks,

        G.

  8. wongvio says:
    November 18, 2009 at 7:57 pm

    very cool

    太强大了~

    Reply
  9. George Burrell says:
    December 9, 2009 at 6:40 am

    Great work, looks ace. I’m trying to use this in a project but I would like to keep everything the one framework (jQuery).

    I know I’m repeating the same question but does anyone know of a jQuery example of this technique?

    Reply
  10. joe says:
    December 12, 2009 at 6:57 am

    hello,
    did somebody change it do a 2digit hour like 23:12:55

    I don´t know how to do this

    thx for help

    Reply
  11. Matthew says:
    December 23, 2009 at 3:23 am

    //For a countdown up to 99days 23hours 59minutes and 59seconds

    // JavaScript Document

    //initial time
    var d1_current = -1;
    var d2_current = -1;
    var h1_current = -1;
    var h2_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”, “64px”);
    $(upperId).setStyle(“visibility”, “visible”);
    $(upperBackId).src = pathUpper+parseInt(changeNumber)+”.png”;

    $(lowerId).src = pathLower+parseInt(changeNumber)+”.png”;
    $(lowerId).setStyle(“height”, “0px”);
    $(lowerId).setStyle(“visibility”, “visible”);

    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);

    }//flip

    function retroClock(){

    // get new time
    futuredate = new Date(2010,2,4,10,0,0,0); //finishing time in this format (year, month, day, hours, minutes, seconds, ms)
    now = new Date();
    timeleft = futuredate.getTime() – now.getTime(); //time till sale in ms
    daysleft = Math.floor(timeleft/86400000);
    timeleft = Math.floor(timeleft%86400000)
    hoursleft = Math.floor(timeleft/3600000);
    timeleft = Math.floor(timeleft%3600000)
    minutesleft = Math.floor(timeleft/60000);
    timeleft = Math.floor(timeleft%60000);
    secondsleft = Math.floor(timeleft/1000);

    d1 = Math.floor(daysleft/10);
    d2 = Math.floor(daysleft%10);
    h1 = Math.floor(hoursleft/10);
    h2 = Math.floor(hoursleft%10);
    m1 = Math.floor(minutesleft/10);
    m2 = Math.floor(minutesleft%10);
    s1 = Math.floor(secondsleft/10);
    s2 = Math.floor(secondsleft%10);

    //change pads
    if ( d2 != d2_current){
    flip(‘daysUpRight’, ‘daysDownRight’, d2, ‘/Double/Up/Right/’, ‘/Double/Down/Right/’);
    d2_current = d2;

    flip(‘daysUpLeft’, ‘daysDownLeft’, d1, ‘/Double/Up/Left/’, ‘/Double/Down/Left/’);
    d1_current = d1;
    }

    if ( h2 != h2_current){
    flip(‘hoursUpRight’, ‘hoursDownRight’, h2, ‘/Double/Up/Right/’, ‘/Double/Down/Right/’);
    h2_current = h2;

    flip(‘hoursUpLeft’, ‘hoursDownLeft’, h1, ‘/Double/Up/Left/’, ‘/Double/Down/Left/’);
    h1_current = h1;
    }

    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;
    }

    }

    setInterval(‘retroClock()’, 1000);

    Reply
  12. Benoit says:
    December 23, 2009 at 2:05 pm

    This is very nice! Thanks.

    Reply
  13. Amdad Hossain says:
    January 20, 2010 at 8:22 pm

    Nice Work Buddy

    Reply
  14. simon bromfield says:
    January 29, 2010 at 5:26 am

    how about a countdown version where a closing or launch date is specified, that would be very cool, and this is btw brilliant

    Reply
  15. hamburger says:
    January 29, 2010 at 1:15 pm

    hello,
    nobody who did it in a 2digit hour like 23:12:55 and mootools?

    can sombody provide a *.psd-file?
    i’am not very familiare with photoshop

    thx

    Reply
  16. hari says:
    March 5, 2010 at 9:15 am

    how to create such a clock with actionscript

    Reply
  17. Michael Camilleri says:
    April 11, 2010 at 7:33 am

    Thanks Alexandru! I used the tutorial as a base to construct a countdown timer with the same look and feel :) Couldn’t have done it without your hard work :)

    Reply
    • sanje says:
      August 4, 2010 at 4:06 am

      Hi Micheal,
      It looks wonderful. Could you share how to set the countdown timer like you have.
      Much appreciated.

      Thanks,
      Sanje

      Reply
  18. Horia says:
    May 13, 2010 at 6:46 am

    Hi,

    I’ve ported this beautiful example to jQuery. Read all about it here:

    http://od-eon.com/blogs/horia/animated-retro-clock/

    Thank you!

    Reply
  19. mOrgs says:
    August 11, 2010 at 9:15 am

    Would there be any reason why the clock would not work from the hours of 7:00 AM – 8:00 AM?

    Reply
  20. maniac says:
    August 28, 2010 at 9:04 pm

    does work in asp.net?

    Reply
  21. PluginsDirectory says:
    September 14, 2010 at 5:44 am

    great, i really like this clock! i added a link from my web directory
    thanks

    Reply
  22. Jozef Maxted says:
    November 18, 2010 at 11:15 am

    Hi,

    Has anyone worked out a way to get rid of this 1px to right bug yet. Been trying to sort it out for ages and I can’t pinpoint where its coming from :-S

    Reply
    • reinis says:
      January 30, 2011 at 7:34 pm

      I think it’s caused by the spacer.png

      Reply
    • San Paco says:
      June 30, 2011 at 5:12 am

      The real reason is because the images being used were not knocked up properly, some of them are slightly displaced. This is a great flip clock tut. I changed all my images to suit my design, that’s when I noticed it was actually the images and how they were put together. Also, some are 63×64 and 125×64 when they should be 64×64 and 126×64 respectively. Try it, you’ll see!

      The spacer is absolutely necessary to make the animation transition as smooth as possible. Without it, the image in the background is out by 1 pixel whilst the animation is in transition from top half of the numbers to the lower half of the numbers. Try it, you’ll see! (If you cant be bothered to go through the whole process, try using Firebug to delete the spacer.png element in the code in real time, you’ll still see!

      Thanks for this tut Alex P.

      Reply
  23. kuzmic says:
    November 21, 2010 at 3:04 pm

    Hi,
    please do you know, how create watch with 24 hours? example: 21:20:53. Thx.

    Reply
  24. Kris says:
    December 10, 2010 at 4:21 pm

    Does anyone think it is possible to redo this with CSS3?

    Reply
  25. Kris says:
    December 14, 2010 at 4:06 pm

    I am having problems with flickering in Safari. Can anyone help?

    Reply
  26. jcubic says:
    January 24, 2011 at 8:16 am

    You should add image preloading – on slow internet connections when digit change to the one that wasn’t displayed before, for a few miliseconds (depend on connection) number is displayed with two difrerent halves e.g. the bottom part is 3 and the top 2.

    Reply
  27. Haloa says:
    March 15, 2011 at 3:11 pm

    hi can u made this on action script (not 3 but 2 or 1) we need it for mobile app urgent please

    Reply
  28. Bart says:
    March 24, 2011 at 8:39 am

    Wow very useful indeed very cool! I plan to use it on miy site but think that the flipping seconds are to much. How can I only display hours and minutes?

    Reply
  29. Kuldar says:
    July 30, 2011 at 1:14 pm

    Really nice one mate! Any idea how to make it to flip from left to right? I have some little designs here which needs some flipping :) Any help will be really appreciated!

    Reply
  30. Bocha says:
    July 31, 2011 at 8:50 am

    Sorry my english, somebody have problems with the position of the clock? i cant controlled this question and its fucking me crazy!
    the second problem is the retro clock, i configured in a master page, y cant see in the content page and the think is that watch is allways visible.

    again, so sorry my english, and i hope an answer cooming soon!

    thanks!

    Reply
  31. Kate says:
    August 1, 2011 at 4:47 am

    This works great in the demo download code, but when I try to get it working on my website it continually comes up with:

    $(upperId).setStyle is not a function
    [Break on this error] $(upperId).setStyle(“height”, “17px”);
    animate.js (line 27)

    Any ideas? I am using Strict instead of transitional.

    Thanks.

    Reply
  32. Kate says:
    August 1, 2011 at 5:01 am

    I figured out my problem with the error

    $(upperId).setStyle is not a function
    [Break on this error] $(upperId).setStyle(“height”, “17px”);
    animate.js (line 27)

    I am using jquery on the page and it is essential I do that.. so could you help me out so that this isn’t creating a conflict with my jquery? Is there a special way you can call it so it doesn’t give an error?

    Thanks

    Reply
  33. Evan says:
    September 22, 2011 at 6:05 am

    Does anyone know how this can integrate with a countdown *schedule*?
    For example, it should countdown to 10am, then at 10am, countdown to 12pm, then at 12:05pm, countdown to 1pm, etc.

    Reply
  34. Francisco says:
    September 30, 2011 at 6:42 am

    @Kate You just need to add

    jQuery.noConflict();

    right after you load jQuery.js.
    Hope it helps.

    Reply
  35. Shaneka Landell says:
    January 12, 2012 at 10:33 pm

    Any one know how you would count seconds and minutes for 5 minutes and then start over again from 0 minutes 1 seconds.?

    Reply
Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.