Timer-Based Counter Animation ⏱️

This JavaScript code creates a timer-based counter effect, animating digits in a cash_value element to create a dynamic scrolling effect for each digit. It mimics the behavior of a digital display.

---

Key Components 🔑

1. Timer Function ⏲️

The timer() function is a promise that waits for a specified number of seconds and then resolves. It’s used to delay the animation of each digit.

const timer = function(sec) {
  return new Promise(function(resolve) {
    setTimeout(resolve, 1000 * sec);
  })
}

---

2. Setup the Display Setup 🔢

The setup() function prepares the text inside the .cash_value element:

• It splits the text into individual characters.
• Non-numeric characters (like currency symbols) are wrapped in <span> tags.
• Digits are grouped in divs and further split for animation.

const setup = () => {
  const str = str_ori.innerText;
  const num = [];
  
  // Create empty digit divs and spans
  Array.from(str).forEach(el => {
    if (!isFinite(el)) { 
      // Handle non-numeric (symbols)
      const span = document.createElement("span");
      span.innerText = el;
      str_ori.appendChild(span);
    } else { 
      // Handle numeric (digits)
      num.push(el);
      const div = document.createElement("div");
      str_ori.appendChild(div);
      div.className = "digits";
    }
  });
  return num;
}

---

3. Animating Digits 🏃‍♂️

The startCounter() function applies a scrolling effect to each digit:

• The digits are animated to scroll through their values, creating a "rolling" effect.
• Each digit is animated one by one, moving down and settling at the correct value.

const number = setup();

const digit_counter = document.querySelectorAll(".digits");
for (let d = 0; d < number.length; d++) {
  timer(0).then(() => {
    digit_counter[d].style.translate = `0rem ${((((d+1)*10)-10) + parseInt(number[d])) * -6.251}rem`;
  }, 0);
}

---

4. Effect Explained 🌀

• Each digit (0-9) is represented by a series of <span> elements, and the animation scrolls through those numbers.
• The translate property moves the digits vertically, creating the illusion of a rolling counter effect.

---

Final Result 🎉

When the code is executed:

1. Text Splitting ✂️: The string is split into digits and non-digits.
2. Animating Digits 💨: Each digit scrolls through its values to create an animated counter.
3. Smooth Display 🖥️: After the animation, each digit settles at its correct position.

---

Example Animation 🎥

Imagine seeing something like this in action:

• A string like "$123.45" becomes:
  • The dollar sign ($) stays static.
  • Each number (1, 2, 3, 4, 5) scrolls through values before stopping at their final positions.

---

Summary ✨

This JavaScript code simulates a smooth, animated counter that can be used for things like displaying cash values or any numeric data in a visually appealing way.