JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<ul class="myCounter">
  <li id="d9"></li>
  <li id="d8"></li>
  <li id="d7"></li>
  <li id="d6"></li>
  <li id="d5"></li>
  <li id="d4"></li>
  <li id="d3"></li>
  <li id="d2"></li>
  <li id="d1"></li>
  <li id="d0"></li>
</ul>

CSS

.myCounter {
      list-style-type: none;
      width: 566px;
      margin: 50px auto;
      display: block;
    }

     .myCounter li {
      float: left;
      background: url(http://opencultivation.com/img/filmstrip.png) 0 0 no-repeat;
      width: 53px;
      height: 103px;
    }

    .myCounter li.seperator {
      background: url(http://opencultivation.com/img/comma.png) 2px 75px no-repeat;
      width: 12px
    }

JavaScript

// Array to hold each digit's starting background-position Y value
  var initialPos = [0, -618, -1236, -1854, -2472, -3090, -3708, -4326, -4944, -5562];
  // Amination frames
  var animationFrames = 5;
  // Frame shift
  var frameShift = 103;

  // Starting number
  var theNumber = 8999998596;
  // Increment
  var increment = 17;
  // Pace of counting in milliseconds
  var pace = 1800;

  // Initializing variables
  var digitsOld = [], digitsNew = [], subStart, subEnd, x, y;

  // Function that controls counting
  function doCount(){
    var x = theNumber.toString();
    theNumber += increment;
    var y = theNumber.toString();
    digitCheck(x, y);
  }

  // This checks the old count value vs. new value, to determine how many digits
  // have changed and need to be animated.
  function digitCheck(x, y){
    var digitsOld = splitToArray(x),
      digitsNew = splitToArray(y);
    for (var i = 0, c = digitsNew.length; i < c; i++){
      if (digitsNew[i] != digitsOld[i]){
        animateDigit(i, digitsOld[i], digitsNew[i]);
      }
    }
  }

  // Animation function
  function animateDigit(n, oldDigit, newDigit){
    // I want three different animations speeds based on the digit,
    // because the pace and increment is so high. If it was counting
    // slower, just one speed would do.
    // 1: Changes so fast is just like a blur
    // 2: You can see complete animation, barely
    // 3: Nice and slow
    var speed;
    switch (n){
      case 0:
        speed = pace / 8;
        break;
      case 1:
        speed = pace / 4;
        break;
      default:
        speed = pace / 2;
        break;
    }
    // Cap on slowest animation can go
    speed = (speed > 100) ? 100 : speed;
    // Get the initial Y value of background position to begin animation
    var pos = initialPos[oldDigit];
    // Each animation is 5 frames long, and 103px down the background image.
    // We delay each frame according to the speed we determined above.
    for (var k = 0; k <...