CSS View Transitions is one of the latest additions to Chromium-based browsers, and I decided to try it.
I was following Dave's instructions, and I immediately noticed something that I liked a lot. As soon as I enabled the View Transitions in my browser (since it is still an experimental technology) and added <meta name="view-transition" content="same-origin"> to every page of my site, I noticed the transition was already working.
It works in the most basic mode, fading out the current page and fading in the visited page, which is a thousand times better than the default behavior (in my humble opinion). And there you have it—fully functional transitions between your website pages with a single line of code.
Top comments (3)
Damn. I was vaguely aware that this was a thing, but hadn't bothered looking into it. Now after reading this post, the one being linked to and ultimately the explainer for the feature, I'm just in love with this.
Seeing elements move across the screen when opening a new page adds such a nice feeling of continuity and makes it a lot easier to get oriented on the new page.
Sadly, on vivaldi this is somehow still behind a flag, although this version seems to be based on chromium 114, which should already support this by default. Still nice to know this is starting to become viable :)
this is cool info
Looks kinda slick 💅, but I am never again implementing something that does not work across all browsers.