demo · v133

Scroll vs Time: one number, two timelines

The whole reason overallProgress exists: a single 0..1 readout that works the same whether the animation is driven by time or by scroll. Run both side by side and watch the values stay shape-identical.

time-driven (3s, 2 iterations)

overallProgress: 0.000

currentTime: 0 ms

scroll-driven (scroll the box)

keep scrolling…

…all the way down.

overallProgress: 0.000

currentTime: 0%

what the demo shows

Before overallProgress, a generic progress UI had to special-case each timeline kind. document.timeline reports currentTime in milliseconds, but a ScrollTimeline reports it as a CSSUnitValue in %. Iterations also have to be factored in by hand. The new property hides both: it always returns a normalised 0..1 across the entire animation lifecycle (delay + every iteration), no matter the timeline type.

// Same code path for both:
console.log(timeAnim.overallProgress);   // 0.42
console.log(scrollAnim.overallProgress); // 0.42

// Without it, you would have to do this:
const t = timeAnim.currentTime; // number in ms
const localT = (t - timeAnim.effect.getTiming().delay) /
               timeAnim.effect.getTiming().duration;
const overallT = (timeAnim.currentIteration + localT) /
                 timeAnim.effect.getTiming().iterations;
// …and a totally different formula for scroll timelines.

see also

scenario focus

Select a scenario to focus its rendered example and summary.