DEV Community

Sifat Ahmed
Sifat Ahmed

Posted on

A counting-stat animation in HyperFrames, full working code (free recipe)

Following up on the guide I posted about a couple days ago (HyperFrames — renders video from plain HTML/CSS/GSAP instead of a timeline editor). Here's one full recipe from it, in full, free — no teaser cut-off.

The pattern

Turning a plain number into a small performance reads as far more "designed" than just displaying a static figure — genuinely effective for anything results/data-driven: a metric, a price, a countdown.

<section class="clip" data-start="0" data-duration="3" data-track-index="1">
  <div id="stat">0</div>
  <p>customers served</p>
</section>
Enter fullscreen mode Exit fullscreen mode 
const counter = { value: 0 };
tl.to(counter, {
  value: 12480,
  duration: 1.6,
  ease: "power1.inOut",
  onUpdate: () => {
    const el = document.getElementById("stat");
    el.textContent = Math.round(counter.value).toLocaleString();
  }
}, 0.2);
Enter fullscreen mode Exit fullscreen mode

Why it's built this way

Tweening a plain JS object (not the DOM element itself) and writing the formatted number into the element on every tick is the reliable way to do this in a render pipeline that has to seek to arbitrary timestamps and always get the same pixels. It stays perfectly deterministic — the exact displayed number at any timestamp is a pure function of that timestamp — and it avoids animating a text property GSAP doesn't natively tween.

This is one of six recipes in the full guide (title reveal, logo intro, scene crossfade, CTA morph, Ken Burns background drift are the other five), plus a "five pitfalls" section on the mistakes that produce a blank render or frozen frame instead of a helpful error message. If the rest is useful: https://sidheart.gumroad.com/l/lyudd ($19).

Happy to answer questions about the pattern itself here for free either way.

Top comments (0)