While same-document View Transitions have now been available for a while in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷♂️).
Let's experiment!
After following Jake Archibald's work for many months now, and sharing a few links about View Transitions, I wanted to try them, and decided my photography site would be a good playground.
Here's what I got with just a <meta> tag and a few CSS rules:
Thanks Dave Rupert for the very simple View Transitions tutorial!
There are a few improvements required for when we transition from a small and lightweight thumbnail to a very large and heavy photo (still no JPEG-XL…), so I tried to add a Low Quality Image Placeholder (I usually hate them… 😞) to limit the issue on slow networks. But I guess there should be a better solution if I could keep the thumbnail while the large image loads.
Ok for Chrome Canary, but elsewhere?
The documentation for the View Transitions API on MDN is already available, but focused on SPA.
Noam Rosenthal is currently leading the creation of a new explainer for "cross-document navigations" (MPA), a welcome step towards standardisation, and maybe implementation in other browsers.
There are also a lot of open issues in the CSS Working Group GitHub repository with ideas and questions.
Whatever the standardisation and cross-browser implementation status, a really nice thing about View Transitions is that they have been designed as a progressive enhancement, so you can use them right now, even if support is currently low (in terms of browser diversity).
I the mean time, I can only thank Jake Archibald A LOT for this nice improvement of the user experience! 🙏
Top comments (0)