Cross-document view transitions can provide native-feeling page animations on multi-page sites using plain HTML links, without frameworks or client-side routing. An attempt to enable transitions by adding a meta tag in the head results in normal instant navigation with no errors. The meta tag syntax is deprecated and removed, replaced by a CSS-based opt-in approach in Chrome. Copying the outdated code still fails because the underlying specification changed and older tutorials were not updated. Other tutorials focus on same-document view transitions using document.startViewTransition() in JavaScript, which applies to swapping DOM content within a single document and does not match cross-document navigation behavior.
"I knew cross-document view transitions were real, that you could get those slick native-feeling page transitions on plain old multi-page sites without a single framework. No React. No Astro. No client-side router pretending your multi-page application (MPA) is single-page application (SPA). Just HTML pages linking to other HTML pages, with the browser handling the animation between them. Hell yes."
"The first tutorial I found had me dropping <meta name="view-transition" content="same-origin"> into my <head>. Seemed simple enough. I added it to both pages, clicked my link, and... nothing. No transition. No error. Just a normal, instant page load like it was 2004. I opened DevTools, double-checked my syntax, restarted the server, tried Chrome Canary, cleared the cache. Nothing. I did what any self-respecting developer does at that point - I copied the code character by character from the blog post and pasted it in. Still nothing."
"Turns out that <meta> tag syntax? Deprecated. Gone. Chrome shipped it, then replaced it with a CSS-based opt-in, and half the internet's tutorials still show the old way. Those older blog posts still rank well. They look authoritative. And they're just wrong now. Not wrong because the authors were bad - wrong because the spec moved under everyone's feet and nobody went back to update their posts."
"The other half of the tutorials I found were about same-document view transitions. SPA stuff. document.startViewTransition() called in JavaScript when you swap DOM content yourself, which is cool and useful but a completely different feature when you actually sit down to implement it. The API surface"
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]