demo · v133

ViewTimeline overallProgress: three timelines, one number

The headline claim of overallProgress is timeline-independence: 0 = start, 1 = end, always. This demo runs three animations in parallel — time-driven, scroll-driven, and view-timeline-driven — each reporting overallProgress. Scroll any of the two scroller panels to watch all three bars stay structurally identical despite completely different underlying timelines.

overallProgress not supported in this browser. The readouts below will remain at 0. Status on ChromeStatus.
DocumentTimeline

Time-driven · 4s · 2 iter

overallProgress: —

currentTime: — ms

ScrollTimeline

Scroll-driven · scroll box ↓

scroll this box

keep scrolling…

overallProgress: —

currentTime: —

ViewTimeline

View-driven · scroll sentinel ↓

subject element

overallProgress: —

currentTime: —

// Three timelines — same overallProgress reading shape.

// 1. Document (time) timeline
const timeAnim = el.animate([{marginLeft:'0%'},{marginLeft:'calc(100% - 28px)'}],
  { duration: 4000, iterations: 2, fill: 'both' });
timeAnim.pause(); // drive manually below

// 2. Scroll timeline
const scrollTL = new ScrollTimeline({ source: scrollerEl, axis: 'block' });
const scrollAnim = el2.animate([...], { timeline: scrollTL, fill: 'both' });

// 3. View timeline — tracks when #sentinel enters/leaves the scroller viewport
const viewTL = new ViewTimeline({ subject: sentinel, axis: 'block' });
const viewAnim = el3.animate([...], { timeline: viewTL, fill: 'both' });

// All three read the same way:
requestAnimationFrame(function tick(t) {
  timeAnim.currentTime = (t * 2) % 8000; // 4s × 2 iter
  [timeAnim, scrollAnim, viewAnim].forEach(a => {
    const p = a.overallProgress ?? null;
    // p is 0..1 regardless of timeline kind
  });
  requestAnimationFrame(tick);
});

see also

scenario focus

Select a scenario to focus its rendered example and summary.