Let displaced siblings glide

Wrap the section below a changing list so it moves instead of jumps.

From vercel-react-view-transitions, patterns.md.

Rows above, section below

Add and remove favorites.

Section unwrappedBad
<section>…
Bare boundaryGood
<ViewTransition><section>…
<FavoritesList />              {/* rows enter/exit */}
<ViewTransition>               {/* bare: update enabled */}
  <section>
    <h2>You Might Also Like</h2>
    <Recommendations />
  </section>
</ViewTransition>

Why it matters, pros and cons

Why it matters

Only content inside an activated boundary moves. The section under a growing list jumps to its new spot unless it is a boundary too.

Pros

  • The eye follows the section instead of losing it.
  • Nothing inside changed; the displacement is the update.
  • One bare wrapper, no props.

Cons

  • It must be a direct sibling of the changing content.
  • default="none" turns this off.
  • Or pad the list to a fixed height so nothing moves.