The bare minimum you need to enable View Transitions on your website
View transitions are a great way to make your website feel more dynamic and engaging when users navigate between pages. The View Transition API, in particular, lets you create animated transitions between different website views.
This includes animating between DOM states in a single-page app (SPA) and animating the navigation between documents in a multi-page app (MPA).
While the API is quite extensive, allowing you to create complex transitions, control the initial state of the view, handle the transition among selected elements, and so on, you can achieve a basic view transition with just a few lines of CSS and HTML meta tag. These changes are progressive enhancements, meaning they won’t break the user experience in browsers that don’t support the feature.
Alright, so, the first thing you need to do is to add the following meta tag to your HTML document.
<meta name="view-transition" content="same-origin" />
This meta tag tells the browser that the document can transition between views. The same-origin value indicates that the transition should only occur when navigating between documents of the same origin.
Then, you can add the following CSS to your website to enable the view transitions.
@view-transition {
navigation: auto;
}
This CSS rule tells the browser to animate the transition between views automatically. The auto value indicates that the browser should automatically animate the transition between views.
And that’s pretty much it! With these two changes, you can enable view transitions on your website. The browser will now automatically animate the transition between views when navigating between documents of the same origin.
Here’s how the page transition feels like without View Transitions.
And this is how the page transition feels like with View Transitions.
As you can tell, the transition with View Transitions enabled feels more fluid and engaging vs jumpy and abrupt without it. And it’s an instant win for your website’s user experience.
At this point, most modern browsers support the View Transition API except Firefox. But, like I said previously, these changes are progressive enhancements, so, it’s safe to implement them on your website irrespective of the browser support.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
