Flipclock NPM | npm.io

FlipClock.js

Installation

FlipClock is designed to be used a UMD or ES6 module that can be required and imported. NPM is the primary package manager. The CDN exposes FlipClock as a global variable.

NPM

npm install flipclock --save

CDN

Specific version

https://cdn.jsdelivr.net/npm/flipclock@<?js= pkg.version ?>/dist/flipclock.min.js

Always use latest version

https://cdn.jsdelivr.net/npm/flipclock/dist/flipclock.min.js

New in v1.0

FlipClock originally was developed an example library for a computer science class that I taught. I never actually thought people would use it, let alone imagine how people would use it. It's been a long time coming, but FlipClock.js has been rewritten for a modern age with no dependencies.

Rewritten ES6 Syntax
No dependencies, pure vanilla JS
Import with Webpack, Rollup, Browserify with the UMD build
Mobile friendly with responsive CSS
Supports negative values
Supports alpha values
All new CSS themes for different flip effects
All new clock faces
Extensible and customizable
Unit testing with Jest

Basic Usage

import FlipClock from 'flipclock';

const el = document.querySelector('.clock');

const clock = new FlipClock(el, new Date, {
	face: 'HourCounter'
});

Collaborators

Special Credit

Big thanks to all the examples on the Internet. But in particular, a huge thanks goes out to Adem Ilter who built this example, which provided the best animation and least amount of code to prove the concept.