v147 · JS · CSS · concept 1 of 3
Concurrent Shuffle
Two card lists. Two independent transition scopes. Shuffle both at once — they animate simultaneously without blocking each other or freezing the page.
element.startViewTransition() is not available in this browser. This demo requires Chrome 147+.
Left transitions
0
Right transitions
0
Concurrent now
0
Max concurrent
0
Left list
Right list
how it works
Each list element is the transition scope. When you shuffle, its startViewTransition() is called with a callback that rearranges the list items. Because each list is an independent scope, both can be mid-transition at the same time — something impossible with document.startViewTransition().
// Each list element is its own scope.
// CSS: .card-list { view-transition-scope: all; contain: layout; }
// Assign stable view-transition-name values to each card.
cards.forEach((card, i) => {
card.style.viewTransitionName = `card-${listId}-${card.dataset.id}`;
});
// Shuffle scoped to the left list only.
leftList.startViewTransition(() => {
shuffleChildren(leftList);
});
// Simultaneously, shuffle the right list independently.
rightList.startViewTransition(() => {
shuffleChildren(rightList);
});see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗