DEV Community

Cover image for Transition between pages smoothly with a single line of code
Silvestar Bistrović
Silvestar Bistrović

Posted on • Originally published at

Transition between pages smoothly with a single line of code

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.

CSS View Transitions in action on my site.

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)

darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

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 :)

stankukucka profile image
Stan Kukučka

this is cool info

superails profile image
Yaroslav Shmarov

Looks kinda slick 💅, but I am never again implementing something that does not work across all browsers.