Flip

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>