Animated Webkit Flipclock


7 Responses

  1. Wills Bithrey Wills Bithrey

    Here's something I've been working on on-and-off for a long time. I figured i'd shove a demo out there to see what you guys think. The design isn't mine and it from Max's awesome Flip Clock PSD available here

    My work has been in trying to make this think work as great as it looks ;). ALL the animates are done with 100% CSS 3D transforms. Because of this this demo is highly experimental and only works in Safari and the dev version of Chrome (v11 just added hardware accelerated CSS).

    Javascript is only used to control timing and stuff.

    It seem's Chrome has someway to go on the 3d transforms front before it's caught up with Safari.

    Once again, please view in a recent version of Safari ;)

    I need to fix some of my clock logic and the JS is currently a mess, but hey I said it was experimental so ;). If anyone want's to give me a hand with finishing the clock logic that would be great else I'm sure i will get round to it just as soon as I graduate...

    Yes I'm using Safari already!! - Let me check it out


    about 3 years ago

  2. Max Di Capua Max Di Capua

    Love it! great to see awesome stuff being made from my PSD :)

    about 3 years ago

  3. Rui Melo Rui Melo

    I've been looking for a stylish flip down countdown for a while. Looks very promosing.

    about 3 years ago

  4. Wills Bithrey Wills Bithrey

    Thanks guys ;)

    about 3 years ago

  5. Eric Magnuson Eric Magnuson

    Amazing job with the CSS3 transformations.

    almost 3 years ago

  6. Nathan Hornby Nathan Hornby

    Very swish.

    When I watched it in action though it seemed a bit like there should be some division between the individual numbers. The coding and animation are spot on though, I'd only recommend that very minor aesthetic addition.

    almost 3 years ago

  7. Wills Bithrey Wills Bithrey

    Hi Nathan, yes i took thought that. However at the time of experimenting I was simply using the great PSD by Max (above). My focus was on nailing the animation. In the future I'f love to make this skin able but I really need to sort the clock logic out first ;). After that my next step was going to be making it look awesome on the iPad ;).

    almost 3 years ago

keyboard shortcuts: previous shot next shot L or F like