JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<div id="number-container"></div>
<button id="animate-button">Animate to Random Number</button>
<div>
  <div>newFromNumber: <span id="new-from-number"></span></div>
  <div>newToNumber: <span id="new-to-number"></span></div>
  <div>lastToNumber: <span id="last-to-number"></span></div>
</div>

CSS

.digit-container {
  width: var(--sprite-width);
  height: var(--sprite-height);
  overflow: hidden;
  position: relative;
  display: inline-block;
  font-family: Lobster;
}

.digit {
  font-family: Lobster;
  position: absolute;
  width: var(--sprite-width);
  height: calc(20 * var(--sprite-height));
  background-repeat: repeat-y;
  /* blue
  background-image:...

JavaScript

function padNumberWithZeros(number, maxDigits) {
   const numberString = number.toString();
   const integerPart = numberString.split('.')[0];
   const fractionPart = numberString.split('.')[1] || '0';

   const paddedIntegerPart = integerPart.padStart(maxDigits, '0');
   return paddedIntegerPart + '.' + fractionPart;
 }

 function showDigit(htmlDivElement, spritesheet, numberToShow, offsetPercentage) {
   // Create the digit container
   const digitContainer = document.createElement('div');
   digitContainer.classList.add('digit-container');

   const digit = document.createElement('div');
   digit.classList.add('digit');
   //digit.style.backgroundImage = `url(${spritesheet})`;

   const wholeNumber = Math.floor(numberToShow) % 10;
   const spriteHeight = parseFloat(
     getComputedStyle(document.documentElement).getPropertyValue('--sprite-height')
   );

   const offsetY = -(wholeNumber * spriteHeight) - (offsetPercentage * spriteHeight);
   digit.style.backgroundPositionY = offsetY + 'px';

   digitContainer.appendChild(digit);
   htmlDivElement.appendChild(digitContainer);
 }

 function calculateOffsets(number) {
   const offsets = [];
   let shouldOffsetPrevious = true;

   for (let i = number.length - 1; i >= 0; i--) {
     const digit = parseInt(number.charAt(i), 10);

     if (shouldOffsetPrevious && digit === 9) {
       offsets[i] = 1;
       shouldOffsetPrevious = true;
     } else if (shouldOffsetPrevious) {
       offsets[i] = 1;
       shouldOffsetPrevious = false;
     } else {
       offsets[i] = 0;
     }
   }

   return offsets;
 }

 function showNumber(htmlDivElement, spritesheet, numberToShow, spriteWidth, spriteHeight, fraction, maxDigits) {
   htmlDivElement.innerHTML = ''; // Clear the container before displaying a new number

   const rootStyle = document.documentElement.style;
   rootStyle.setProperty('--sprite-width', spriteWidth + 'px');
   rootStyle.setProperty('--sprite-height', spriteHeight + 'px');

   const paddedNumberToShow =...