This is a demonstration of Cross-document view transitions in the context of a slide deck.

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.

<a href="slide-03.html">prev</a> 
<a href="slide-02.html">next</a>

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.

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.

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.

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.

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;
}

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.

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.

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 they 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.

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

Try:

• adding more elements like pictures and lists
• create different slide layouts
• make the style your own by choosing different fonts, colors and background images
• experiment with different animations
• explore how to add different animations to different slides
• explore how to add different view transition types when navigating forward and backwards in your deck

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