stats-odometer

Summary

Three big-number stats — Projects Delivered (40+), Clients Satisfaction (96%), Years of Experience (10+) — sitting under the testimonials. Numbers ride on the Odometer library and count up when the wrapper enters the viewport, paired with a primary-coloured suffix and a small caption.

HTML structure (minimal)

<div class="indicator-wrap flat-spacing">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="wg-indicator">
          <p class="indicate-title text-body-1"><span class="text-primary">//</span> Projects Delivered</p>
          <p class="indicate-counter wg-counter text-display-1 fw-medium">
            <span class="odometer" data-number="40">10</span> <span class="text-primary">+</span>
          </p>
          <p class="indicate-sub">Creative work that drive<br>real results</p>
        </div>
      </div>
      <div class="col-md-4"><!-- 96 % --></div>
      <div class="col-md-4"><!-- 10 + --></div>
    </div>
  </div>
</div>
<div class="bg-img-item">
  <img src="assets/images/item/grid.png" alt="">
</div>

Key SCSS tokens

.indicator-wrap {
  position: relative;
  z-index: 1;

  .indicate-counter {
    margin: 12px 0;
    font-feature-settings: 'tnum';
  }

  .indicate-title {
    color: var(--white-64);
    margin-bottom: 8px;
  }
}

Animation logic

// assets/js/main.js — counterOdo()
$(window).on('scroll', function () {
  $('.wg-counter').each(function () {
    var $counter = $(this);
    if (isElementInViewport($counter) && !$counter.hasClass('counted')) {
      var targetNumber = $counter.find('.odometer').data('number');
      setTimeout(function () { $counter.find('.odometer').html(targetNumber); }, 0);
      $counter.addClass('counted');
    }
  });
});

Notable details

• Odometer's transform-based digit roll is paired with the primary-coloured suffix (+ / %) for a "ticker tape" effect without dragging in a chart library.
• The counter only fires once (counted class) — doesn't re-trigger on scroll-back.
• Initial DOM value is "10" so layout is stable before the count starts; Odometer animates to data-number.

Use when

• Trust strips that need a kinetic feel without a heavyweight stats library.
• Sections where stats sit on top of a decorative grid background and shouldn't compete with it.

Caveats

• counterOdo() listens to scroll directly — for very long pages with many counters, switch to ScrollTrigger or IntersectionObserver.
• Odometer only counts integers; for decimals use a custom implementation.