Flip

Price
$8
Includes
  • future updates
  • 6 months professional support

Flip is the web's most advanced flip counter plugin. It's easy to setup, amazingly flexible and ships with beautifully animated presets.

Whether you want to visualize visitor counts, count down to a date, show upload progress, social media followers, or donation status, Tick has got your use case covered.

Features:

Works standalone but ships with handy wrapper for jQuery.

Buy Flip Counter Now

Presets

The Flip package ships with the following 10 presets.

They are setup to be used as a starting point for your project and illustrate what can be achieved with Flip.

This is the classic "count down to date" counter. It can among other things be configured based on timezone and automatically sync to the server date.

Learn more about counting down
Loading... %

Flip panels can be updated at high speeds and will still render correctly.

Learn more about flip

Count according to a set schedule. This counter will reach zero every 5 minutes. Tick features hourly, daily, weekly, montly and yearly scheduling options.

Learn about scheduling

Counter values can be set to numeric, string or array values. Flip can be used to render nice animated ticker tapes.

Learn about value transforms
Tomorrow is hours minutes and seconds away

Text in the Flip panels can be styled using CSS

Learn more about flip

Counter shows the current time. Flip panels can be set to have individual rounded corners.

Learn more about flip
m
s
ms

Intervals can be paused, resumed, stopped and started making all sorts of time based counter controls possible.

Learn more about the timer

Counter can also count up since a date. This counter counts up from the 1st of January 2017.

Learn more about counting up
$ 1 2 , 8 5 0 .00

A counter that renders a total donated value using the number transform.

Learn more about value transforms
Reached new followers since start of

Counters can be placed inside running text and will still render beautifully.

Learn more about layouting

Feature Overview

Animated Flip Counters

The Flip view renders beautifully animated Flip counters.

Presets

The package includes the 10 presets shown above featuring the following functionality.

Responsive

Will work flawlessly on small and big screens.

Technical

Optimized for performance and flexibility

Support

We care about you, our customer.

Browsers

Tested on the following browsers. If not supported, Tick does not load and shows the HTML fallback content.

Quick Tutorial

Building Tick Counters is very similar to building with Legos.

Start with the base .tick block:

<div class="tick">

</div>

Now, we haven't yet entered a value so we don't see anything on the screen.

So let's do that now, add a value using the data-value attribute.

<div class="tick"
     data-value="1808">

</div>

Tick now automatically adds a plain "text" view to present our value.

We can also present strings instead of numbers.

<div class="tick"
     data-value="Hello World">

</div>

This is useful but not very spectacular, let's do something more interesting. We'll switch back to numbers and setup a "flip" counter.

We tell Tick to render a different view by adding an HTML element with a data-view attribute.

<div class="tick"
     data-value="180815">

    <span data-view="flip"></span>

</div>

There! That's a lot better. It would be even nicer if all the characters were divided over separate views.

We'll add the repeater tag to accomplish this.

It's a tag that tells Tick to create a presenter for each character in a value.

<div class="tick"
     data-value="180815">

    <div data-repeat="true">

        <span data-view="flip"></span>

    </div>

</div>

Let's now align our counter to the middle of the page.

There's a special attribute called data-layout that will help us with positioning. We'll tell it we want a horizontal row of presenters and we want them aligned to the center of the page.

<div class="tick"
     data-value="180815">

    <div data-repeat="true"
         data-layout="horizontal center">

        <span data-view="flip"></span>

    </div>

</div>

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="180815"
     data-did-init="setupFlipper">

    <div data-repeat="true"
         data-layout="horizontal center">

        <span data-view="flip"></span>

    </div>

</div>
<script>
function setupFlipper(tick) {

    // The Tick `interval` function is 
    // an easy way to quickly setup a timer
    Tick.helper.interval(function() {

        // We simply increase the value 
        // of our ticker each second
        tick.value++;

    }, 1000);

}
</script>

So there you have it, a simple flip counter build with Tick.

Read the documentation to take a deep dive into what's possible with Tick.