demo · v133

overallProgress

Run a real Web Animation, then read Animation.overallProgress against the older currentTime / duration math. Change iterations and direction and watch the new property collapse the bookkeeping into a single 0..1 value.

currentTime
—
manual progress
—
overallProgress
—

checking support…

the code

const anim = ball.animate(
  [{ transform: "translateX(0)" }, { transform: "translateX(calc(100% - 40px))" }],
  { duration: 1200, iterations: 3, direction: "alternate", delay: 500 },
);

// before: manual reconstruction
const t = anim.currentTime ?? 0;
const total = (anim.effect.getComputedTiming().endTime) ?? 0;
const manual = total ? Math.min(1, Math.max(0, t / total)) : 0;

// after, in Chrome 133+:
const overall = anim.overallProgress; // single 0..1, accounts for delay+iterations+direction

see also