v149 · JavaScript · demo

Animation Sequencer

Chain scroll steps with await: each panel scrolls into view, pauses, then the next begins — guaranteed sequencing with no setTimeout hacks.

Ready
// Chrome 149+: await each scroll step
async function runSequence(panels) {
  for (const panel of panels) {
    // scrollIntoView now returns a Promise
    await panel.scrollIntoView({
      behavior: 'smooth',
      inline: 'start',
      block: 'nearest',
    });

    // Or use scrollTo on the container:
    const { interrupted } = await container.scrollTo({
      left: panel.offsetLeft,
      behavior: 'smooth',
    });

    if (interrupted) break; // user scrolled away

    await delay(1000); // pause between panels
  }
}

// Before Chrome 149: fragile setTimeout approach
function runSequenceBefore(panels) {
  panels.forEach((panel, i) => {
    setTimeout(() => panel.scrollIntoView({ behavior: 'smooth' }),
               i * 1500); // guess at scroll duration
  });
}

see also