PHPackages                             levmyshkin/flipdown - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. levmyshkin/flipdown

ActiveDrupal-library[Utility & Helpers](/categories/utility)

levmyshkin/flipdown
===================

FlipDown is a lightweight and performant flip styled countdown clock.

1.0.0(3y ago)04.8k↓18.2%MITJavaScript

Since Feb 15Pushed 3y agoCompare

[ Source](https://github.com/levmyshkin/flipdown)[ Packagist](https://packagist.org/packages/levmyshkin/flipdown)[ RSS](/packages/levmyshkin-flipdown/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

[![](https://camo.githubusercontent.com/58f0f4de143696868868d387ceb98444498af294465551ab21f366eba9684293/687474703a2f2f692e696d6775722e636f6d2f557462496334532e706e67 "Example of FlipDown")](https://camo.githubusercontent.com/58f0f4de143696868868d387ceb98444498af294465551ab21f366eba9684293/687474703a2f2f692e696d6775722e636f6d2f557462496334532e706e67)

FlipDown
========

[](#flipdown)

⏰ A lightweight and performant flip styled countdown clock.

[![NPM Version](https://camo.githubusercontent.com/e1200ef94627a5ee525e89128ed23a1f8aa7fbf52c1bde35db80e25259cdf190/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666c6970646f776e3f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/e1200ef94627a5ee525e89128ed23a1f8aa7fbf52c1bde35db80e25259cdf190/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f666c6970646f776e3f7374796c653d666c61742d737175617265)[![NPM Downloads](https://camo.githubusercontent.com/16107aefe32c36d1beefeccba0d20cb521610dd5eb3dcbc6b7631bbf686d2ba5/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f666c6970646f776e3f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/16107aefe32c36d1beefeccba0d20cb521610dd5eb3dcbc6b7631bbf686d2ba5/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f666c6970646f776e3f7374796c653d666c61742d737175617265)

Features
--------

[](#features)

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

Example
-------

[](#example)

Example live at:

Remix FlipDown on CodePen:

Basic Usage
-----------

[](#basic-usage)

To get started, either clone this repo or install with `npm install flipdown` or `yarn add flipdown`.

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

```
new FlipDown(1538137672).start();
```

Include the [CSS and JS](https://github.com/PButcher/flipdown/tree/master/dist) in `` and include the following line in your HTML.

```

```

See a full example [here](https://github.com/PButcher/flipdown/tree/master/example).

Multiple Instances
------------------

[](#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(1588017373, "registerBy").start();
new FlipDown(1593561600, "eventStart").start();
```

```

```

Themes
------

[](#themes)

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",
}).start();
```

### Custom Themes

[](#custom-themes)

Custom themes can be added by adding a new stylesheet using the FlipDown [theme template](https://github.com/PButcher/flipdown/blob/master/src/flipdown.css#L3-L34).

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](#Themes)).

Headings
--------

[](#headings)

You can add your own rotor group headings by passing an array as part of the `opt` object. Bear in mind this won't change the functionality of the rotors (eg: the 'days' rotor won't magically start counting months because you passed it 'Months' as a heading).

Suggested use is for i18n. Usage as follows:

```
new FlipDown(1538137672, {
  headings: ["Nap", "Óra", "Perc", "Másodperc"],
}).start();
```

Note that headings will default to English if not provided: `["Days", "Hours", "Minutes", "Seconds"]`

API
---

[](#api)

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

[](#flipdownprototypeconstructoruts-el-opts)

Create a new FlipDown instance.

#### Parameters

[](#parameters)

##### `uts`

[](#uts)

Type: *number*

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

##### `[el]`

[](#el)

**Optional**
Type: *string* (default: `flipdown`)

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

##### `[opts]`

[](#opts)

**Optional**
Type: *object* (default: `{}`)

Optionally specify additional configuration settings. Currently supported settings include:

- [`theme`](#Themes)
- [`headings`](#Headings)

### `FlipDown.prototype.start()`

[](#flipdownprototypestart)

Start the countdown.

### `FlipDown.prototype.ifEnded(callback)`

[](#flipdownprototypeifendedcallback)

Call a function once the countdown has ended.

#### Parameters

[](#parameters-1)

##### `callback`

[](#callback)

Type: *function*

Function to execute once the countdown has ended.

#### Example

[](#example-1)

```
var flipdown = new FlipDown(1538137672)

  // Start the countdown
  .start()

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

Acknowledgements
----------------

[](#acknowledgements)

Thanks to the following people for their suggestions/fixes:

- [@chuckbergeron](https://github.com/chuckbergeron) for his help with making FlipDown responsive.
- [@vasiliki-b](https://github.com/vasiliki-b) for spotting and fixing the Safari backface-visibility issue.
- [@joeinnes](https://github.com/joeinnes) for adding i18n to rotor group headings.

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 91.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1189d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7b36520942f79193ba42311edf66bce9654c126a2d6733a5b3a627a4a217229f?d=identicon)[levmyshkin](/maintainers/levmyshkin)

---

Top Contributors

[![PButcher](https://avatars.githubusercontent.com/u/1674115?v=4)](https://github.com/PButcher "PButcher (52 commits)")[![joeinnes](https://avatars.githubusercontent.com/u/4704069?v=4)](https://github.com/joeinnes "joeinnes (4 commits)")[![ivan829llc](https://avatars.githubusercontent.com/u/132590440?v=4)](https://github.com/ivan829llc "ivan829llc (1 commits)")

### Embed Badge

![Health badge](/badges/levmyshkin-flipdown/health.svg)

```
[![Health](https://phpackages.com/badges/levmyshkin-flipdown/health.svg)](https://phpackages.com/packages/levmyshkin-flipdown)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)