Implementing View Transitions in Two Minutes

Monday, 29 May 2023

At the moment view transitions are still being implemented, but it doesn’t mean that you can’t get ahead of the curve and experiment with them. However they’re not enabled by default; so in Chrome Canary you’ll need to toggle the following settings first:

chrome://flags#view-transition
chrome://flags#view-transition-on-navigation

Cross fade

The default behaviour for view transitions is a simple cross fade between two pages and to get that working all you need to do is add this meta tag to the <head> of your page:

<meta name="view-transition" content="same-origin">

Deploy that, and you’re done. This will give you a cross fade between every page. Nice and neat.

Going further

There’s a lot more power in view transitions, but that will take you more than two minutes to implement. However, not by much; 28 lines of CSS, and 3 tweaks to the HTML later and there is a nice tween between the blog listing page and the blog post itself. You can see the related commit on Github.

More words

Many more words have been shared about view transitions… I have particularly enjoyed and benefited from these ones:

Post changelog

Back to all posts