odometer-funfact

Summary

Centred row of four counter blocks ("4k Projects Completed", "20 Years Experiences", "17k Happy Customers", "30 Team Members"). Each number ticks up from 00 to its target via the odometer.js plugin, triggered the moment the row appears via jquery.appear.

HTML structure (minimal)

<section class="funfact-section centred">
  <div class="auto-container">
    <div class="inner-container">
      <div class="funfact-block-one">
        <div class="inner-box">
          <div class="count-outer">
            <span class="odometer" data-count="4">00</span>
            <span class="symble">k</span>
          </div>
          <h4>Project<br>Completed</h4>
        </div>
      </div>
      <div class="funfact-block-one">
        <div class="inner-box">
          <div class="count-outer">
            <span class="odometer" data-count="20">00</span>
          </div>
          <h4>Years<br>Experiences</h4>
        </div>
      </div>
      <!-- 2 more blocks -->
    </div>
  </div>
</section>

Key SCSS tokens

.funfact-section { padding-bottom: 110px; text-align: center; }
.funfact-section .inner-container {
  display: flex; align-items: center; justify-content: space-between;
}
.funfact-block-one .count-outer {
  display: inline-flex; align-items: baseline;
  font-family: var(--title-font);
  font-size: 80px; line-height: 1;
}
.funfact-block-one .symble { font-size: 60px; }

Animation logic

if ($('.odometer').length) {
  $('.odometer').each(function () {
    $(this).appear(function () {
      var countNumber = $(this).attr('data-count');
      $(this).html(countNumber); // odometer.js wraps the change in its tick animation
    });
  });
}

Notable details

• Uses both appear (intersection trigger) and odometer (digit-roll animation) — neither is built-in to the page; both come from assets/js.
• The k suffix is rendered as a sibling span, not a unit on the odometer, so the digit roll doesn't fight the suffix.
• The row hangs off .funfact-section and is centred via the .centred utility class, which is just text-align: center.

Use when

• Hero-adjacent stats rows that need a wow moment when scrolled into view.
• About / company pages where headline metrics carry the message.

Caveats

• Two jQuery plugins required (appear, odometer); replacing with IntersectionObserver + a tiny rAF counter is straightforward.
• The default font scale is 80px; readability at small sizes needs the responsive overrides.
• data-count only supports integers — fractional counters (like 4.5k) need extra logic.