Swap

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

Tick Swap Counter is the Web's most advanced animated text counter plugin. It's easy to setup, amazingly flexible and ships with beautiful animation 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.

Currently awaiting approval for sale.

Buy Swap Counter Now

Presets

The Swap 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 Swap.

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

Values can also be animated.

Learn about animation

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. Use custom fonts to make your counters stand out.

Learn about value transforms
We've already planted trees this year

Counters can be individually styled, in this case box-shadow is used to add a little tree on top of the decimals.

Learn more about swap counter

Counter shows the current time by rotating value blocks. Text animation can be finely tuned to your liking using transitions.

Learn more about transitions
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

A counter that renders a total donated value using the number transform. By using elastic easing the text gets a jelly like appearance

Learn more about easing
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 Text

The Swap view renders beautifully animated text based on transition settings.

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 "swap" 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="swap"></span>

</div>

It's still the same! That's because "swap" renders the same value as the normal text view, we really need to animate the text to show it's potential.

Let's update our counter each second so the standard animation becomes visible. We'll do this by binding a function to the data-did-init callback.

<div class="tick"
     data-value="180815"
     data-did-init="handleTickInit">

    <span data-view="swap"></span>
    
</div>
<script>
function handleTickInit(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++;
    
    });

}
</script>

For a more interesting animation we can style the counter using the transition property.

We still want to "crossfade" the values, but we'll also tell it to "swap" them.

<div class="tick"
     data-value="180815"
     data-did-init="handleTickInit">

    <span data-view="swap" data-style="transition:crossfade, swap"></span>

</div>

Now for our final trick we will animate the individual characters. To do this we'll have have to first turn the value into the individual characters with the repeat attribute.

Then we can set value transforms to the repeat attribute to tell it to split the value and to output the value with a slight delay.

<div class="tick"
     data-value="180815"
     data-did-init="handleTickInit">

    <div data-repeat="true" data-transform="split -> delay">

        <span data-view="swap" data-style="transition:crossfade, swap"></span>

    </div>
    
</div>

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

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