v147 · JS · CSS · concept 2 of 3

Live Feed

Three independent news feeds, each refreshing on its own timer using element.startViewTransition(). All three can be mid-transition simultaneously — the page never freezes.

element.startViewTransition() is not available in this browser. This demo requires Chrome 147+.

how it works

Each feed column is marked with view-transition-scope: all and contain: layout. When an update arrives, the column element calls startViewTransition() and replaces its children. Because each column is an independent scope, three columns can be mid-transition at the same moment without any of them blocking the others — or freezing interaction elsewhere on the page.

// CSS on each feed column:
// .feed-items { view-transition-scope: all; contain: layout; }

// Assign stable names to each row so they cross-fade in place.
function applyTransitionNames(column, items) {
  items.forEach((item) => {
    item.el.style.viewTransitionName = `feed-item-${item.id}`;
  });
}

// Each column runs its own transition independently.
feedColumn.startViewTransition(() => {
  applyTransitionNames(feedColumn, newItems);
  renderItems(feedColumn, newItems);
});

see also

implementation reference

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