Seamless Journeys: Cross-Document View Transitions

The Vanguard of Web Animations: Browser Support

Welcome to the future of web navigation. Cross-document view transitions, now live in Chrome 126, transform the mundane page navigation into a captivating visual experience. This progressive enhancement allows animations between pages of the same origin using just CSS—no more reliance on client-side JavaScript routers. For browsers that haven’t caught up, navigation gracefully falls back to standard behavior, ensuring a seamless experience for all users.

Crafting the Experience: A Minimalistic Approach

Let’s dive into a minimal example that breathes life into your pages with smooth transitions.

HTML: Twin Pages in Harmony

Consider two almost identical pages linked to each other. These pages will be the canvas for our animations.

page-1.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="/style.css" />
		<title>Page 1</title>
		<script type="speculationrules">
			{
				"prerender": [
					{
						"source": "list",
						"urls": ["/page-2/"]
					}
				]
			}
		</script>
	</head>
	<body>
		<main>
			<h1>Page 1</h1>
			<a href="/page-2/">Page 2</a>
		</main>
	</body>
</html>

page-2.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="/style.css" />
		<title>Page 2</title>
		<script type="speculationrules">
			{
				"prerender": [
					{
						"source": "list",
						"urls": ["/page-1/"]
					}
				]
			}
		</script>
	</head>
	<body>
		<main>
			<a href="/page-1/">Page 1</a>
			<h1>Page 2</h1>
		</main>
	</body>
</html>

Now, let’s animate these pages with CSS to create a fluid transition effect.

style.css

/* style.css */

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

h1 {
	view-transition-name: heading;
}

@keyframes slide-out {
	to {
		translate: 0 -100vh;
	}
}
@keyframes scale-in {
	from {
		scale: 0;
	}
}

::view-transition-old(heading) {
	animation: 1s ease-in-out slide-out;
}
::view-transition-new(heading) {
	animation: 1s ease-in-out scale-in;
}

What’s Happening Here?

Enable Transitions: The @view-transition rule activates cross-document transitions.
Accessibility First: The media query ensures that users who prefer reduced motion aren’t overwhelmed by animations.
Targeted Animations: By assigning view-transition-name to the <h1>, we control which elements animate during navigation.
Custom Animations: The slide-out and scale-in keyframes define how the heading animates out and in, respectively.

Experience the Magic

With these snippets in place, navigating between Page 1 and Page 2 will showcase a seamless cross-fade, where the heading elegantly slides out and scales in, providing users with a smooth and engaging transition.

For a more extensive exploration of cross-document transitions, check out this comprehensive demo by the Google team, which highlights the full potential of this feature.

The Speculation Rules API: Speeding Up Transitions

Integrate the Speculation Rules API to further enhance your transitions. By preloading navigations, you ensure that animations run swiftly and without hiccups, delivering a polished user experience.

Cross-document view transitions redefine how users experience navigation on your website. By infusing simple CSS rules, you turn ordinary page loads into dynamic, animated journeys. Embrace this technology to elevate your web applications, making every transition a testament to thoughtful design and user-centric development.

Stay ahead of the curve and make your navigation not just functional, but truly captivating. Happy animating!