Summary

  • The W3C’s first public View Transitions Level 1 draft in October 2022 gave a page a way to switch document states while the browser captured old and new visual appearances for an animation layer.
  • The 2023 and 2024 Level 1 texts refined the lifecycle, named elements and transition pseudo-elements. A 2024 Level 2 draft carried the visual handoff into cross-document navigation.

A page shows a row of stories. You tap one card, and the publication wants the picture to expand into the story header. There is a practical snag behind the elegant motion. The card belongs to one document state; the full story belongs to another. Traditional animation often required both states to coexist in a temporary DOM contraption, a stage built solely so the audience could watch the furniture move. The transition could look smooth while the document underneath became a theatrical warehouse.

The W3C’s first public View Transitions Level 1 draft, published on 25 October 2022, offered the browser a role beyond painting each frame. A page could start a view transition around an update callback. The browser captured the old visual state, let the callback change the document, then captured the new state. It could animate between those visual states without requiring the author to leave duplicate content in the live document. The scenery changes once; the audience watches a photograph of the old set make its exit.

The distinction is more than a visual party trick. Keeping old and new interfaces alive at once can complicate where an element really is and what a reader or assistive technology encounters. A captured visual layer lets the DOM move directly to the new state. The browser takes care of the temporary picture. The page remains responsible for its actual content and for the update callback that changes it.

The 5 September 2023 Candidate Recommendation Snapshot spelled out the sequence. Capture old state. Pause rendering. Run the page’s update callback. Capture new state. Build transition pseudo-elements. Resume rendering and animate. By default, a page-wide cross-fade does the modest job. A designer can give chosen elements a view-transition-name and animate their captured old and new appearances separately. The browser supplies a shared stage; the site decides which actors have their own marks on the floor.

That naming power comes with bookkeeping. A name has to identify the intended visual participant in a state. Two elements claiming the same transition name can abort the visual transition. The 28 March 2024 Candidate Recommendation Draft describes document.startViewTransition(), the capture tree and the promises that mark progress. The animation can fail or be skipped while the page’s update callback still runs. A site cannot rely on the costume change as the source of truth. The underlying document is the show; the effect is how the scene change looks from the seats.

The W3C publication history moves from the first public draft in 2022 to candidate texts in 2023 and 2024. The next boundary was a real navigation: what happens when the reader leaves one document for another? The 13 November 2024 View Transitions Level 2 Working Draft takes the model into cross-document navigation with an opt-in path. The browser now has to coordinate pictures across a real navigation, not merely a callback within one document. That is a different handoff with its own rules, and it shows why the first version’s apparently tiny camera trick was an architectural opening.

A site still owes the reader a good new page. A slow data load remains slow; a confusing card remains confusing; a jarring animation can make both worse. The browser’s visual layer gives designers a cleaner way to move between real states. Used with restraint, the trick makes a change understandable: the card the reader chose becomes the story they expected. The stage manager gets a quiet bow. The audience gets the right article.