demo · v133

Iteration meter

Configure delay, iteration count, and direction; then scrub time and watch how overallProgress linearises a multi-iteration animation into one 0..1 ribbon, while the per-iteration bars show where you are inside the current loop.

t = 0ms overallProgress = 0.000

overallProgress

0.000

single 0..1 across all iterations

per-iteration progress

N bars, current iteration filled in green

how it works

Setting iterations: N on the keyframe options yields an animation whose currentTime still runs 0..N×duration. overallProgress divides that by total active duration so it remains a single 0..1 ribbon regardless of N, direction, or whether you're driving by time or scroll.

const anim = el.animate(kf, {
  duration, iterations, delay, direction
});
anim.pause();
anim.currentTime = scrubMs;
report(anim.overallProgress); // 0..1, always

see also