v150 · JavaScript · demo

Lazy Reveal

"Load more" appends new items, scrolls to them, and only then fades them in. The reveal animation is gated on the scroll promise resolving — without promises this required a setTimeout guess or fragile scroll-end detection.

Chrome 150+ — Element.prototype.scrollIntoView() now returns a Promise that resolves when the scroll animation completes. In older browsers the item appears immediately without the sequenced animation.

Click "Load more" to append items and watch the scroll → reveal sequence in the log

Activity Feed idle
A
alice
Shipped the new design system. All tokens are live in production.
2 minutes ago
B
bob
PR #482 approved. Merging after CI turns green.
5 minutes ago
C
carol
Deployed to staging. Need review on the edge-case handling in the payment flow.
12 minutes ago
00:00Ready — click "Load more"
// Without promises: reveal happened before scroll finished
item.style.display = 'block';          // appears then scrolls — jarring
container.scrollTop = item.offsetTop;

// With scroll promise: reveal only after scroll completes
item.classList.add('hidden');          // invisible first
container.appendChild(item);

await item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
// ↑ resolves when smooth scroll animation ends

item.classList.remove('hidden');       // now reveal — guaranteed in-view

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗