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
- Scroll Monitor — observe promise resolution live
- Back to feature index
- ChromeStatus entry