View transitions

Mark Hanna (nerd)

I write code for fun

I have two cats, Milo and Cass

Welcome to the first front end show & tell!

A white person with long curly hair - me - holding a young white and tabby cat - Milo - up on my shoulder.

View transitions

Some technical terms

JavaScript: A programming language that runs in your web browser, which can make web pages react to user input
CSS: A declarative language that describes how content should look in a web browser, including layout and animations
DOM: Document Object Model - the way your web browser understands HTML and exposes it to JavaScript code

A white person with long curly hair - me - sitting on the couch while holding a young white and tabby cat - Cass - is resting on my shoulder.

View transitions

Transitions suck, everything just "snaps"

Animations are hard, what if they could be easier?

Cass the young white and tabby cat sitting in a box in a sunbeam, looking at the camera.

View transitions

You just saw a view transition. Did you spot it?

Let's slow things down

Cass and Milo the white and tabby cats looking at the camera. Cass is curled up in a box, Milo is sitting behind him.

View transitions

The standard view transition is a cross-fade

But things can get more complicated

Cass and Milo the white and tabby cats looking out a window. Their heads are stacked like cartoon characters peeking around a corner.

View transitions

Different elements can have their own view transitions

As well as cross-fading, elements move and change size

Cass and Milo the white and tabby cats asleep together on a red blanket, with their heads pressed together.

View transitions

View transitions are triggered with JavaScript

function updateDOM() {
	// Modify the DOM in some way
}

if (document.startViewTransition) {
	document.startViewTransition(updateDOM);
} else {
	updateDom();
}

View transitions

View transitions can be controlled with CSS animations

::view-transition-old(slide) {
	animation: slide-to-left 0.3s ease-in-out;
}

::view-transition-new(slide) {
	animation: slide-from-right 0.3s ease-in-out;
}

View transitions

View transitions can make complex animations simple

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

View transitions

View transitions can make complex animations simple

Item 6
Item 4
Item 5
Item 2
Item 1
Item 3

View transitions

Individual elements will be transitioned if they have a view-transition-name

<li style="view-transition-name: example-item-1;">Item 1</li>
<li style="view-transition-name: example-item-2;">Item 2</li>
<li style="view-transition-name: example-item-3;">Item 3</li>
<li style="view-transition-name: example-item-4;">Item 4</li>
<li style="view-transition-name: example-item-5;">Item 5</li>
<li style="view-transition-name: example-item-6;">Item 6</li>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

View transitions

Individual elements will be transitioned if they have a view-transition-name

<li style="view-transition-name: example-item-6;">Item 6</li>
<li style="view-transition-name: example-item-4;">Item 4</li>
<li style="view-transition-name: example-item-5;">Item 5</li>
<li style="view-transition-name: example-item-2;">Item 2</li>
<li style="view-transition-name: example-item-1;">Item 1</li>
<li style="view-transition-name: example-item-3;">Item 3</li>

Item 6
Item 4
Item 5
Item 2
Item 1
Item 3

View transitions

An animation of realtime updates in the Timely calendar, showing an event animating between two positions. — Without view transitions

View transitions

Caveats

Only supported in Chromium currently
But easy to implement as a progressive enhancement

TypeScript doesn't ship with type definitions for this API yet
But it's simple to write the necessary type definitions from the documentation

Milo the white and tabby kitten trying to bite a light switch.

Caveats

They are harder to use within a framework (like React) that controls DOM updates
But it doesn't take too much work to write a custom hook to make them easy to use

It only works for single page applications
But support for transitions over a navigation is coming, currently behind a flag

Milo the young white and tabby cat standing up and grabbing onto the cables underneath my desk.

Links

Cass the white and tabby cat lying in a sunbeam underneath a footstool, with all four legs stretched out.