Same-origin Cross-doc View Transitions

[hvanops]

Description

Cross-document view transitions allows developers to create animated transitions between an old and new page on the same origin. This is done by capturing a static capture of the old and new pages, and animating between them.

See article

Specification

https://drafts.csswg.org/css-view-transitions-2

Additional Signals

Standards Positions
Gecko: Positive - mozilla/standards-positions#677 (comment)
WebKit: Positive - CSS same-origin cross-document view-transition · Issue #193 · WebKit/standards-positions · GitHub

Tests
Tests

Browser Bugs
Chromium bugs and feature requests

Developer Surveys
View transitions was 3rd on browser interoperability list (based on the freeform question - Which existing HTML features or browser APIs are you unable to use because of browser differences or lack of support?) in State of HTML 2023
From State of CSS 2023 comments on View Transitions:
“#17 To my knowledge, this is only supported within a page. I'm waiting for the Multi-Page App version ❤️”

Additional Signals
Public reactions and demos from developers on MPA VT:
Announcement about VT MPA with 633 (as of July 4 2023)
Demo by jh3yy
Demo by derSchepp
Demo of VT with Astro by charca
Demo of Astro and VT by charca
“The View Transitions API is an absolute game changer and will effectively deprecate single page apps in most cases.” Demo by dannymoerkerke
Tweet by @manz
Wishlists by notable web developers where View Transitions is listed as high priority:
CSS Wish List 2023 – Eric’s Archived Thoughts
Tyler’s CSS Wish List for 2023 – Cloud Four
CSS Wishlist 2023 - daverupert.com
Articles written about the feature since launch:
Getting started with View Transitions on multi-page apps - daverupert.com
“It took less than an hour to do, requires zero JavaScript, and two lines of CSS. I’m pleased with the results.”
The View Transitions API And Delightful UI Animations (Part 2) — Smashing Magazine
“The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks”

[captainbrosset]

In preliminary results to the State of CSS 2024 survey, View Transitions came up as the 5th most common answer to the question "Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?".

(can't share a link yet as these are preliminary results)

[bkardell]

Are these the tests then? https://wpt.fyi/results/css/css-view-transitions?label=master&label=experimental&aligned&q=transitions

[bramus]

Are these the tests then? https://wpt.fyi/results/css/css-view-transitions?label=master&label=experimental&aligned&q=transitions

That’s all VT tests. The Cross-Document ones are located in the navigation subfolder: https://wpt.fyi/results/css/css-view-transitions/navigation?label=master&label=experimental&aligned&q=transitions