Animation.overallProgress

concepts

1. overallProgress

   Animation.overallProgress — a 0..1 progress value that accounts for delays, iterations, and direction in one number.

2. Scroll vs Time

   Two animations — one time-driven, one scroll-driven — reporting overallProgress side by side. The motivating use case for the API: one progress number that works across timeline kinds.

3. Iteration meter

   Configure delay, iteration count, and direction; scrub time and watch overallProgress linearise multi-iteration animations into one 0..1 ribbon, with per-loop bars below.

4. Orchestration dashboard

   Three concurrent animations — different durations, iteration counts, and directions — aggregated into a single parent “average progress” bar via overallProgress.

5. Progress sequence

   Five sequential loading phases — Connecting, Authenticating, Fetching, Processing, Rendering — each driven by a CSS animation with chained animation-delay. overallProgress reads each phase's 0–1 value to feed a master progress bar and per-phase indicators. No timer math, no Date.now() arithmetic.

6. ViewTimeline overallProgress

   Adds a third panel to the timeline comparison: a ViewTimeline tracking when a sentinel element enters/leaves a scroller viewport. All three timelines — DocumentTimeline, ScrollTimeline, ViewTimeline — report the same 0..1 shape through overallProgress, confirming the API's timeline-independence.

why it shipped

This property is provide authors a convenient and consistent representation of how far along an animation has advanced across its iterations and regardless of the nature of its timeline. Without animation.overallProgress, a developer would need to manually compute how far an animation has advanced factoring in the number of iterations of the animation and whether the currentTime of the animation is a percentage of total time (as in the case of scroll-driven animations) or an absolute time quantity (as in the case of time-driven animations).

references

• ChromeStatus entry
• Spec