The View Transitions API is the browser’s own way to animate between two states of a page, and since 2024 between two pages. Shopify’s Horizon theme is built on it. It is a good tool with sharp edges, and it is worth knowing what it can and cannot do before you build a shop’s motion on it.
What the API is
The browser takes a snapshot of the old page, loads the new one, takes a snapshot of that, and animates between the two with CSS. Elements that share a name on both pages are matched and moved from their old box to their new one. The same-document version, for single-page apps, arrived in Chrome in 2023. The cross-document version, for ordinary multi-page sites like Shopify themes, shipped in Chrome and Edge in 2024 and in Safari 18.2; it needs nothing more than a line of CSS on both pages and the pages being on the same origin.
What it gives a Shopify theme
The shared element. A product photo on a collection card and the same photo on the product page can be matched, and the browser flies it from one to the other. That is Horizon’s product flight, and it is Segue’s Flight, the move Automatic picks when a visitor clicks a product photo. Without the API this needs a JavaScript router; with it, two pages and a name.
Where it falls short
- Nothing moves while the page loads. The old page is frozen as a snapshot the moment the click happens, and the animation only starts once the new page has rendered. On a slow connection that is a still image for as long as the load takes, and there is no way to put a cover or a preloader in that gap.
- Not every browser. Firefox does not play cross-document transitions yet, so the page simply loads. Any shop on this API alone needs a plan for that.
- The theme can get in the way. A theme that names the page root for its own transitions, as Horizon does, removes the page’s own snapshot from any other transition; an app has to restore it. Themes that re-render sections on arrival can leave a matched element blank until the transition finishes.
- One pair of pages at a time. The animation is between two snapshots. Anything that should happen in between, such as a cover closing in your colours while the page is fetched, is outside the API.
How Segue uses both
One move with the API and the rest with a cover. Flight is a cross-document view transition when the browser has one: the photo flies, and the page arrives underneath it. Every other move is a cover: it closes on the click, the next page is fetched behind it, prefetched already as the pointer reached the link, and it opens the moment the page is ready. The cover does not depend on the API, so it plays the same in Safari, Chrome and Edge, on desktop and on phones, and it has something to show while the page loads. Firefox loads pages plainly either way.
What this means for you
Nothing to do, if you use an app embed: the embed decides per click. If you are a developer wiring the API into a theme by hand, build for the gap: a cover for the load, a fallback for Firefox, and a test on Horizon and on a theme that re-renders its sections. The docs describe what Segue does in each case; the collection shows it.