Home

Slide Deck with Cross-Document View Transitions

Slide decks in html became a lot easier. Let's create a small demo to prove upcoming web technology for this use case.

published Tue, 20 Jan 2026 16:00:00 GMT

For slide decks in HTML we typically used javascript libraries like reveal.js. But with Cross-document view transitions we can make things a little easier and reduce the amount of code dramatically. Let's create a small starter project to prove the concept. You can find the demo code for this tutorial on github

Basic Setup

Each slide of the slide deck is a simple html document. They share a common basic styling in slide-layout.css file.

Each slide is linked to its siblings with simple anchor tags. Enabling you to navigate from slide to slide in a familiar way.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>First Slide</title>
		<link rel="stylesheet" href="styles.css" />
		<script src="index.js"></script>
	</head>
	<body>
		<h1>First Slide</h1>
		<p>index.html</p>
		<a href="slide-03.html">prev</a>
		<a href="slide-02.html">next</a>
	</body>
</html>

Like any time you navigate on the web the switch between every slide is a hard jump without any transition. For the experience familiar to us from slide decks we want to add smooth transitions between slides.

Enable cross document view transitions

We are going to use a relatively new feature of the web platform: view transitions.

To enable smooth view transitions across two documents add these lines to your CSS code:

@view-transition {
	navigation: auto;
}

The CSSViewTransitionRule navigation property auto causes the browser to apply a quick smooth transition to the navigation between pages.

Control the speed of the transition

To help you observing the behavior you can select the ::view-transition-group() root to slow it down by applying a longer animation-duration.

::view-transition-group(root) {
	animation-duration: 3s;
}

You can experiment with different css animation attributes. For detailed observations use the animations inspector in chrome dev tools.

Modify the transition animation

In the browsers dev tools you will see the view transition group root covering the contents of your new page. It contains an image pair with two snapshots of your page. One of the old page and one of the new.

A browser DevTools view showing the CSS View Transitions pseudo-element hierarchy, with ::view-transition-group(root) containing ::view-transition-image-pair(root) and its children ::view-transition-old(root) and ::view-transition-new(root)

You can select these snapshots with ::view-transition-old(root) and ::view-transition-new(root) and apply individual animations to each of them.

::view-transition-old(root) {
	animation-name: wipe-left-out;
}

::view-transition-new(root) {
	animation-name: wipe-left-in;
}

Add more view transition groups

You can control the transition of more elements than just the root. To do so you create new transition groups by applying the view-transition-name property to the elements you want to animate.

h1 {
	view-transition-name: headline;
}

Be aware that the selector must result in a single element because each view transition name must map to exactly one element per document. If multiple elements share the same transition name, the browser cannot determine which element to transition and will skip the animation for that name.

Experiment with adding multiple transition groups and animating them individually.

Accessibility: reduced motion

Before publishing our slide deck we wrap the code for big animations into a prefers-reduced-motion media query.

@media (prefers-reduced-motion: no-preference) {
	/* animation code */
}

This way users can opt out of non essential animations. This is especially helpful to users with vestibular disorders.

Bonus: Implementing keyboard animation

For a more slide deck like behavior we add the aria-keyshortcuts-Attribute to the links in our slides. This way we can control which keys we want to use to switch forward and backward in our presentation.

<a aria-keyshortcuts="ArrowLeft p" href="slide-03.html">prev</a>
<a aria-keyshortcuts="ArrowRight n" href="slide-02.html">next</a>

Like all ARIA attributes, this does not add default browser behavior on its own. We have to use JavaScript, to actually make the keyboard shortcuts work.

document.addEventListener("keydown", (e) => {
	// 1. Safety check: Don't hijack keys if the user is typing
	const isTyping =
		e.target.tagName === "INPUT" ||
		e.target.tagName === "TEXTAREA" ||
		e.target.isContentEditable;

	if (isTyping) return;

	// 2. Search for the key within the space-separated list
	// [aria-keyshortcuts~="ArrowRight"] matches "ArrowRight" or "n ArrowRight"

	const link = document.querySelector(`a[aria-keyshortcuts~="${e.key}"]`);

	if (link) {
		e.preventDefault();
		link.click();
	}
});

Observe that this code contains a check to avoid triggering the navigation when you are interacting with a text input field or editable text. This wouldn’t matter for a static slide deck. But the strength of this approach is the possibility to add demos and interactive elements right into your presentation.

Conclusion:

You can now create any presentation you like in HTML and CSS without the use of any other software than a text editor and your browser. Explore the view transitions API for more possibilities for ways to improve your slide deck.

Try:

Later you can use tools like the static site generator eleventy for a more comfortable workflow.