Flip

PQINA

Flip is the most advanced Flip counter plugin available on the web. It's super easy to setup, amazingly flexible and beautifully animated.

Whether you want to count down to an event, visualize a fund raising campaign, show a clock or a sale counter, Flip has got your use case covered.

Flip counter in a nutshell

  • Works Standalone, no Dependencies
  • Super Fast and Beautifully Animated
  • Responsive and Mobile Friendly
  • Works on all Major Browsers
  • JavaScript and jQuery API
  • Fits any Language, Locale or Timezone

Presets

Use one of the presets below as a starting point. The visual style of each preset can be easily customized with CSS.

Advanced features

Feature overview

Download now

Let's build!

Building Flip counters is very similar to building with Legos. Let’s spend a couple minutes building a Flip counter together.

  1. We start with the tick base block.

    <div class="tick"></div>
  2. As we haven't yet entered a value Tick does not really do anything.

    Let's set a value by adding a data-value attribute to the base block.

    <div class="tick"
         data-value="Hello World"></div>
  3. Our counter is now presented with a plain "text" view.

    We can also present strings instead of numbers.

    <div class="tick"
         data-value="1808"></div>
  4. While useful, this is not a flip counter by any means, and it's certainly not very spectacular.

    Let's turn this counter into a flip counter.

    We tell the Tick engine to render a different view by adding an HTML element that has a data-view attribute with its value set to "flip".

    <div class="tick"
         data-value="Hello World">
        <span data-view="flip"></span>
    </div>
  5. Alright, that's a lot better!

    Let's switch back to a numeric value but this time we'll have it split up into separate flip panels.

    <div class="tick"
         data-value="1234">
        <div data-repeat="true">
            <span data-view="flip"></span>
        </div>
    </div>
  6. While Tick is great for static counters, it really shines for counters that are regularly updated.

    Let's update our counter each second. We'll do that by binding a function to the data-did-init callback.

    <div class="tick"
         data-value="1234"
         data-did-init="setupFlip">
        <div data-repeat="true">
            <span data-view="flip"></span>
        </div>
    </div>
    
    <script>
    function setupFlip(tick) {
    
        // The Tick `interval` function
        // helps to quickly setup a timer
        Tick.helper.interval(function() {
    
            // For this demo we increase
            // the value of our ticker
            // each second
            tick.value++;
    
        }, 1000);
    
    }
    </script>
  7. Our counter is now "visually" done, one step remains, and that's making sure the information in your counter is also accessible.

    We'll add an aria-hidden attribute to hide the content of the counter.

    Then we'll add an aria-label attribute that will contain the replacement content.

    <div class="tick"
         data-value="1234"
         data-did-init="setupFlip">
         <!-- 
         The aria-hidden attribute below hides 
         the tick content from screenreaders
         -->
        <div data-repeat="true" 
             aria-hidden="true">
            <span data-view="flip"></span>
        </div>
    </div>
    
    <script>
    function setupFlip(tick) {
    
        Tick.helper.interval(function() {
    
            tick.value++;
    
            // The aria-label attribute is
            // used instead of the actual
            // tick content
            tick.root.setAttribute(
                'aria-label', 
                tick.value
            );
    
        }, 1000);
    
    }
    </script>