Counting Dynamic Scale · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

Counting Dynamic Scale · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

<!-- inside a standard scene clip (hyperframes-core) -->
<div class="counter-wrap">
  <span class="counter" id="counter">0</span><span class="counter-suffix">{suffix}</span>
</div>
<div class="counter-label">{label}</div>

.counter-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: {counterContainerWidth}; /* fixed width — no layout shift as digit count changes */
}
.counter {
  font-variant-numeric: tabular-nums; /* MANDATORY — digits keep equal width */
  display: inline-block;
  font-size: {endSize}; /* final size is static; GSAP animates scale, not font-size */
  transform-origin: center center;
}
.counter-suffix {
  opacity: 0;
  transform: translateY(20px);
}

const counter = document.getElementById("counter");
const state = { value: 0 };
const START_SCALE = START_SIZE / END_SIZE;

// Count value — onUpdate changes text only
tl.to(
  state,
  {
    value: TARGET_VALUE,
    duration: COUNT_DUR,
    ease: COUNT_EASE,
    onUpdate: () => {
      counter.textContent = Math.round(state.value).toLocaleString();
    },
  },
  0,
);

// Visual growth — compositor transform sharing the count's timing + ease
tl.fromTo(counter, { scale: START_SCALE }, { scale: 1, duration: COUNT_DUR, ease: COUNT_EASE }, 0);

// Suffix slides in AFTER the count completes
tl.to(
  ".counter-suffix",
  { opacity: 1, y: 0, duration: SUFFIX_DUR, ease: `back.out(${SUFFIX_BOUNCE_FACTOR})` },
  COUNT_DUR,
);

// Label fades in early
tl.from(".counter-label", { opacity: 0, y: 12, duration: LABEL_DUR, ease: "power2.out" }, LABEL_AT);

token	range	notes
TARGET_VALUE	2–3 digits ideal	4+ digits needs a wider container; must fit at END_SIZE without clipping
START_SIZE / END_SIZE	START ≈ 40–60% of END	design inputs used once for START_SCALE; never tween either
COUNT_DUR	1.2–2.5s	below ~0.8s reads as a flash — the eye must read the digits scrolling past
COUNT_EASE	`power2.out` / `power3.out` ⭐ / `expo.out`	shared by value + scale; more `.out` = more dramatic deceleration at the peak
SUFFIX_DUR	0.3–0.6s	fires at `COUNT_DUR`, never during the count
SUFFIX_BOUNCE_FACTOR	1.4–2.0	overshoot is fine on the suffix (it’s punctuation, not data)
LABEL_AT / LABEL_DUR	AT < COUNT_DUR/2; 0.4–0.7s	label arrives before the count peaks