startViewTransition()

Reordering a list without it jumping

CaveatEvery element you want animated needs a view-transition-name, and each one has to be unique at the moment of the transition. Two matching names and the transition is skipped outright, with an error only in the console.

FallbackWhere the API is missing the callback still runs and the DOM still updates — you lose the animation and nothing else. That makes it safe to ship without a feature check around the update itself.

// the DOM change goes inside the callback
document.startViewTransition?.(() => reorder())
  ?? reorder();

/* unique, or the transition is skipped */
#build { view-transition-name: build; }
#deploy { view-transition-name: deploy; }

Published 1 Aug 2026