Classic Flip Clock Style Countdown & Counter Library – flip.js

Preview:

Description:

flip.js is an open-source, fully customizable, pretty nice, classic flip clock style countdown & counter component in vanilla JavaScript and CSS.

Ideal for stopwatch, clock, visitor counter, event countdown, billboard & airport-style text flip animation and much more.

Features:

• 24 different easing modes.
• 34 transform functions to build complex counters easily.
• Configurable flip animation.
• Multiple languages.
• Fully responsive and mobile-friendly.
• Auto syncs the client and server time.
• Quickly implements it in your project with the 12 presets.

Basic usage:

1. Download the package and load the following JavaScript and CSS files into your HTML page.

<link rel="stylesheet" href="flip/flip.min.css" />
<script src="flip/flip.min.js"></script>

2. Create a basic counter.

<div class="tick"
     data-value="1234"
     data-did-init="setupFlip">
    <div data-repeat="true">
        <span data-view="flip"></span>
    </div>
</div>

function setupFlip(tick) {
  Tick.helper.interval(function() {
    tick.value++;
  }, 1000);
}

3. Create a basic countdown.

<div class="tick"
     data-did-init="handleTickInit">
    <div data-repeat="true"
         data-layout="horizontal center fit"
         data-transform="preset(d, h, m, s) -> delay">
        <div class="tick-group">
            <div data-key="value"
                 data-repeat="true"
                 data-transform="pad(00) -> split -> delay">
                <span data-view="flip"></span>
            </div>
            <span data-key="label"
                  data-view="text"
                  class="tick-label"></span>
        </div>
    </div>
</div>

function handleTickInit(tick) {
  var nextYear = (new Date()).getFullYear() + 1;
  
  Tick.count.down(nextYear + '-01-01').onupdate = function(value) {
    tick.value = value;
  };
}

4. Create a normal flip clock.

<div class="tick" data-did-init="handleTickInit">
  <div data-layout="horizontal fit">
      <span data-key="hours" data-transform="pad(00)" data-view="flip"></span>
      <span data-view="text" data-key="sep" class="tick-text-inline"></span>
      <span data-key="minutes" data-transform="pad(00)" data-view="flip"></span>
      <span data-view="text" data-key="sep" class="tick-text-inline"></span>
      <span data-key="seconds" data-transform="pad(00)" data-view="flip"></span>
  </div>
</div>

function handleTickInit(tick) {
  Tick.helper.interval(function(){
      var d = Tick.helper.date();
      tick.value = {
          sep: '.',
          hours: d.getHours(),
          minutes: d.getMinutes(),
          seconds: d.getSeconds()
      };
  });
}

5. Create a stopwatch.

<div class="tick" data-value="0" data-did-init="handleTickInit">
  <div data-layout="horizontal fit" data-value-mapping="indexes">
      <span class="tick-group">
          <span data-view="flip"></span>
          <span class="tick-text-inline">m</span>
      </span>
      <span class="tick-group">
          <span data-repeat="true" data-transform="pad(00) -> split">
              <span data-view="flip"></span>
          </span>
          <span class="tick-text-inline">s</span>
      </span>
      <span class="tick-group">
          <span data-repeat="true" data-transform="pad(000) -> substring(0,2) -> split">
              <span data-view="text" class="tick-text-inline"></span>
          </span>
          <span class="tick-text-inline">ms</span>
      </span>
  </div>
</div>

<div class="tick-controls">
    <button type="button" data-action="start">start</button>
    <button type="button" data-action="stop" style="display:none;">stop</button>
    <button type="button" data-action="reset">reset</button>
</div>

function handleTickInit(tick) {
  // start a timer that is updated each 16 milliseconds
  var timer = Tick.helper.interval(function(passed) {
          // calculate duration in minutes, seconds and milliseconds
          tick.value = Tick.helper.duration(passed, ['m', 's', 'ms']);
      },
      16,
      {
          autostart:false
      }
  );
  // create the controls and listen to user interaction with the controls
  var buttonStart = document.querySelector('[data-action=start]');
  var buttonStop = document.querySelector('[data-action=stop]');
  var buttonReset = document.querySelector('[data-action=reset]');
  buttonStart.addEventListener('click', function() {
      timer.start();
      // show stop button
      buttonStop.style.display = '';
      // hide start button
      buttonStart.style.display = 'none';
  });
  buttonStop.addEventListener('click', function() {
      timer.pause();
      // hide stop button
      buttonStop.style.display = 'none';
      // show start button
      buttonStart.style.display = '';
  });
  buttonReset.addEventListener('click', function() {
      timer.reset();
      // show stop button
      buttonStop.style.display = '';
      // hide start button
      buttonStart.style.display = 'none';
  })
}

6. Create a billboard-style text flip animation.

<div class="tick" data-did-init="handleTickInit">
  <div data-repeat="true" data-layout="horizontal fit" data-transform="upper -> split -> delay(random, 100, 150)">
    <span data-view="flip" data-transform="ascii -> arrive -> round -> char(a-zA-Z)" class="tick-char"></span>
  </div>
</div>

function handleTickInit(tick) {
  // words to show on billboard
  var rotation = [
      'Tick   ',
      'Counter',
      'Is     ',
      'Flippin',
      'Awesome'
  ];
  // current rotation index (we start at the first word)
  var index = 0;
  // each 3 seconds we'll update the billboard
  Tick.helper.interval(function(){
      // get the word at the current index
      tick.value = rotation[index];
      // when we reach the end we start over at zero
      index = index < rotation.length - 1 ? index + 1 : 0;
  }, 3000);
}

7. Visit the Tick Documentation for full API.

More previews:

Counter

Stopwatch

Billboard