demo · v140

Transition Sequencer

Chain three view transitions using await vt.finished. In Chrome 140, finished resolves after the animation truly completes, so A→B then B→C sequences cleanly. Enable "Old timing" to simulate the pre-140 early resolution and see the flicker.

A
t1.ready— t1.updateCallbackDone— t1.finished— t2.ready— t2.updateCallbackDone— t2.finished— t3.ready— t3.done—
Press "Run sequence" to start.

Transition timeline — each row = one step

run the sequence to see the timeline

pre-140 — early finished, overlap

// finished resolved too early →
// starting t2 while t1 still animating
// → visual overlap / flicker

const t1 = startViewTransition(...);
await t1.finished; // resolved mid-animation!
const t2 = startViewTransition(...);
// t1 and t2 run concurrently → mess

Chrome 140 — finished = animation done

// finished resolves after animation ends
// → t2 starts when t1 is fully complete

const t1 = startViewTransition(...);
await t1.finished; // resolves after paint
const t2 = startViewTransition(...);
await t2.finished;
// clean sequential chain, no flicker
async function runSequence() {
  const t1 = document.startViewTransition(() => showPanel('B'));
  await t1.finished; // Chrome 140: resolves when animation ends

  const t2 = document.startViewTransition(() => showPanel('C'));
  await t2.finished;

  const t3 = document.startViewTransition(() => showPanel('A'));
  await t3.finished;

  console.log('All transitions complete, cleanly sequenced');
}

see also