demo · v133
Orchestration dashboard
Three animations — different durations, different iteration counts, started at different moments — reported through a single dashboard. overallProgress turns the mess into three uniform 0..1 readings, ready for a parent “timeline progress” aggregate.
This browser does not expose
Animation.overallProgress. Chrome 133+ required.A · 1.2s · 1x
B · 0.8s · 3x
C · 2.0s · 2x reverse
—
—
—
—
why one number per animation matters
If you have a multi-animation sequence — say an onboarding tour or a generative scene — the easiest way to drive a parent progress bar is to average each animation's progress. Before overallProgress, “progress” meant currentTime / (iterations * duration), with extra arithmetic for delays and reverse directions. overallProgress bakes all of that in and exposes the same scale for scroll-driven timelines, where currentTime is a percentage rather than milliseconds.
const overall =
(a.overallProgress + b.overallProgress + c.overallProgress) / 3;
progressBar.value = overall;