npm i @snapboard/flipdown


⏰ A lightweight and performant flip styled countdown clock

by Peter Butcher

0.2.3 (see all)License:MITTypeScript:Not Found
npm i @snapboard/flipdown


⏰ A lightweight and performant flip styled countdown clock.

Version: 0.2.2 [JS: 5.72KB, CSS: 4.47KB]


  • 💡 Lightweight - No jQuery! <11KB minified
  • ⚡ Performant - Animations powered by CSS transitions
  • 📱 Responsive - Works great on screens of all sizes
  • 🎨 Themeable - Choose from built-in themes, or add your own


Example live at: https://pbutcher.uk/flipdown/

Remix FlipDown on CodePen: https://codepen.io/PButcher/pen/dzvMzZ

Basic Usage

For basic usage, FlipDown takes a unix timestamp (in seconds) as an argument.

new FlipDown(1538137672).start();

Include the CSS and JS in <head> and include the following line in your HTML.

<div id="flipdown" class="flipdown"></div>

See a full example here.

Multiple Instances

To use multiple instances of FlipDown on the same page, specify a DOM element ID as the second argument in FlipDown's constructor:

new FlipDown(1538137672, 'signup').start();
new FlipDown(1538137672, 'register').start();
<div id="signup" class="flipdown"></div>
<div id="register" class="flipdown"></div>


FlipDown comes with 2 themes as standard:

  • dark [default]
  • light

To change the theme, you can supply the theme property in the opt object in the constructor with the theme name as a string:

  theme: 'light'

For example, to instantiate FlipDown using the light theme instead:

new FlipDown(1538137672, {
  theme: 'light'

Custom Themes

Custom themes can be added by adding a new stylesheet using the FlipDown theme template.

FlipDown themes must have the class name prefix of: .flipdown__theme- followed by the name of your theme. For example, the standard theme class names are:

  • .flipdown__theme-dark
  • .flipdown__theme-light

You can then load your theme by specifying the theme property in the opt object of the constructor (see Themes).


FlipDown.prototype.constructor(uts, [el], [opts])

Create a new FlipDown instance.



Type: number

The unix timestamp to count down to (in seconds).


Type: string (default: flipdown)

The DOM element ID to attach this FlipDown instance to. Defaults to flipdown.


Type: object (default: {})

Optionally specify additional configuration settings. Currently supported settings include:


Start the countdown.


Call a function once the countdown has ended.



Type: function

Function to execute once the countdown has ended.


var flipdown = new FlipDown(1538137672)

  // Start the countdown

  // Do something when the countdown ends
  .ifEnded(() => {
    console.log('The countdown has ended!');


Thanks to the following people for their suggestions/fixes:

  • @chuckbergeron for his help with making FlipDown responsive.
  • @vasiliki-b for spotting and fixing the Safari backface-visibility issue.
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate