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.

5 out of 5 stars based on 5 reviews Five star rating

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
  • Compatible with Bootstrap and Foundation
  • Fits any Language, Locale or Timezone

Included presets

Flip ships with a set of presets to cover most use cases. The visual style of each preset can be easily customized with CSS.

Customer reviews

5 out of 5 stars based on 5 reviews Five star rating

  • Perfect! Nice Script, great functionality and perfect support. Thank you!

  • I´m a designer and love the modern look as well the very well written documentation!

  • I was primarily looking for a responsive retro-looking countdown clock. Boom, this thing nailed it!

Buy now

Advanced features

Feature overview

Buy 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 doesn ot 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>