9 Free Open Source Flipping Clocks Using CSS and JavaScript

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/JTvdjcdi4hc/

The classic flip-style clock was a staple for years and it’s just one more thing the digital era made obsolete – although not quite forgotten.

We can find a bunch of cool clock designs in PSD form, but it’s more difficult to find working flip-style clocks in code. So I went on a mission to find some awesome examples online.

This gallery features 9 totally free flipping clock designs with a variety of styles and coding techniques.

Whether you want to build something like this for practice or add a working clock onto your page, these snippets are sure to help.

Flip Clock & Countdown

See the Pen Flip Clock & Countdown by Shaw (@shshaw) on CodePen.

So here’s a really interesting project that features a flipping countdown running in pure JS.

There is a bit of CSS for styling but the entire animation setup and the structure all runs on JavaScript. Even the HTML gets embedded through JavaScript.

But there’s also a lot to learn from this pen if you study the code carefully. You’ll find some great snippets to reuse and this makes a nice base for experimenting in JavaScript.

React Flip Clock

See the Pen React Flip Clock by Libor Gabrhel (@Libor_G) on CodePen.

Frontend developers love React for its power and massive community.

With it, you can build lighting-fast web applications and this clock design is just one example.

Developer Libor Gabrhel created this as a small project for testing React. It works so smoothly and the design is exquisite.

Note that while the JS is a bit complex, I also think this would make a great learning project for someone who’s just starting to learn React.

FlipDown.js Example

See the Pen FlipDown.js Example by Peter Butcher (@PButcher) on CodePen.

Developer Peter Butcher created this neat experiment using a simple custom plugin called FlipDown.js.

This runs on vanilla JavaScript – so it has no dependencies. It’s also a really easy plugin to edit, tinker with and expand with your own features.

I can’t say that this flipping animation is perfect because I did spot a few laggy jumps.

But for a really simple plugin I’m definitely impressed.

Pomodoro Timer

See the Pen Pomodoro Timer by Yoong Ti Lee (@yoongtilee) on CodePen.

There aren’t enough adjectives in the world to describe the awesomeness of this timer app.

It’s built around the Pomodoro Technique and it runs natively right in your web browser. You basically set the timer and click “start”. From there, a flipping clock animation counts down until your first break.

You can even alter the total break time and the total work session time.

Plus, the UI design is phenomenal and it’s cleverly designed to across the board.

Countdown Clock

See the Pen Countdown Clock by nir (@nirlodsn) on CodePen.

So maybe you don’t like basic JavaScript for your projects. Maybe you’re more of a jQuery person who prefers working with plugins. No problem.

Have a look at this jQuery script featuring a very basic countdown clock. I noticed the animation styles are incredibly smooth and easy on the eyes regardless of web browser.

Each flipping effect almost looks like a native 3D transform because the items that flip really feel like they’re moving. It takes some effort to get that just right.

If you want a clean, smooth clock effect for your homepage or landing page then definitely keep this snippet in mind.

Flipping Clock

See the Pen Flipping Clock by Harsha Bhat (@harshabhat86) on CodePen.

Okay, so this example doesn’t exactly fit the mold of a “flipping” clock.

But I do think that this pen looks awesome and it captures the spirit of a flipping clock animation.

Developer Harsha Bhat created this effect using Haml, Sass and some clean vanilla JavaScript.

It’s funny how all the free web frameworks in the world still can’t touch plain JavaScript.

I liken this effect to a minimalist design technique that can work with clean, simple websites. Try it out if you’re working on a project that would mesh nicely with this style.

Pure CSS

See the Pen 3D Flip Clock Counter in Pure CSS (Rebound) by Jerry Low (@jerrylow) on CodePen.

Moving away from JavaScript, you might be looking for a pure CSS3 alternative. In that case be sure to save this pen since it’s the best one I could find.

CSS3 has a long way to go in the animation department and I don’t think it’ll ever catch up to JavaScript.

But you can produce some really nice effects with pure CSS code if you know what you’re doing.

I really like this snippet as a starting point for a flipping clock. The animation doesn’t feel as 3D as you’d expect, but it does give the same illusion of natural motion – which is crucial for this kind of feature.

Lighter Design

See the Pen Flip Clock by Ed Hicks (@blucube) on CodePen.

Most of the flipping clock designs you’ll find online feature black squares with lighter text. But this design is different.

Developer Ed Hicks created this lighter flipping clock as an alternate design running on CSS and JS code. It’s actually a fairly complex project, but the JS is simplified since it runs on top of jQuery.

Anyone looking to add a lighter styled clock on their site will surely enjoy digging around in this code snippet.

Clock in Vue.js

See the Pen Flip clock & countdown, Vue by Shaw (@shshaw) on CodePen.

One thing I like about this Vue-powered clock is that all the digits are combined into single squares.

On most clocks you’ll find that the seconds and minutes all have their own blocks for each digit.

This clock looks a whole lot smoother in my opinion. Not to mention that it’s a great practice piece to study if you’re just starting to learn Vue.js.

You’ll notice that this list has a ton of variety in coding styles and many don’t even use frameworks. If you’d like to see more of what’s out there, you can find many other examples if you spend some time digging around CodePen.