dark-stats-counter-row

Summary

A dark four-column counter row showing client consultations, satisfaction percentage, recovered cost and number of attorneys. Each number animates from 0 to its target value over 3 seconds when scrolled into view.

HTML structure (minimal)

<section class="bg-dark-2 text-light pt-80 section-dark">
  <div class="container">
    <div class="row g-4">
      <div class="col-md-3 col-sm-6 text-center">
        <div class="de_count wow fadeInRight">
          <h3 class="fs-48 mb-0"><span class="timer" data-to="2000" data-speed="3000">0</span>+</h3>
          Client Consultations
        </div>
      </div>
      <div class="col-md-3 col-sm-6 text-center">
        <div class="de_count wow fadeInRight" data-wow-delay=".2s">
          <h3 class="fs-48 mb-0"><span class="timer" data-to="90" data-speed="3000">0</span>%</h3>
          Satisfied Clients
        </div>
      </div>
      <div class="col-md-3 col-sm-6 text-center">
        <div class="de_count wow fadeInRight" data-wow-delay=".4s">
          <h3 class="fs-48 mb-0"><span class="timer" data-to="150" data-speed="3000">0</span>m</h3>
          Recovered cost for clients
        </div>
      </div>
      <div class="col-md-3 col-sm-6 text-center">
        <div class="de_count wow fadeInRight" data-wow-delay=".6s">
          <h3 class="fs-48 mb-0"><span class="timer" data-to="25" data-speed="3000">0</span>+</h3>
          Professional Attorneys
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

section.bg-dark-2 { background: var(--bg-dark-2); }   /* deep navy #2b425d */
.pt-80 { padding-top: 80px; }
.de_count h3 { font-weight: 700; line-height: 1; }
.fs-48 { font-size: 48px; }

Animation logic

// Counter animates when first visible — ScrollTrigger or IntersectionObserver
$('.timer').each(function () {
  const $el = $(this);
  $el.appear(() => {
    $({ count: 0 }).animate({ count: +$el.data('to') }, {
      duration: +$el.data('speed'),
      step(now) { $el.text(Math.floor(now)); }
    });
  });
});

Notable details

• Each <span class="timer"> carries data-to (target) and data-speed (duration in ms) — markup-driven, no per-counter JS.
• Suffix characters (+, %, m) live OUTSIDE the timer span so only the digit animates, not the unit.
• wow fadeInRight plus staggered delays (.0s/.2s/.4s/.6s) create a wipe-in across the four counters as the section scrolls in.

Use when

• KPI / by-the-numbers strips on any service-business page.
• Anywhere a single dark band would benefit from kinetic numbers without adding chart libraries.

Caveats

• jQuery .appear() plugin is part of vendors.js; when porting, swap for IntersectionObserver to drop the dependency.
• Counter only animates once on first reveal; users scrolling back up won't see it again.