Skip to content
Bag of Tricks

Last updated: First published:

A View Transition Example

View transition animations are often used to guide the user’s eyes and show context. Follow the movement of the red square to the right and then down to read the message:

Let’s walk through this demo and see some examples of the processing described above.

The Original Document

The document just defines three <div> elements and one <button>.

demo.html
1
<html style="view-transition-name: none">
2
  <body>
3
    <div style="view-transition-name: a" id="red">This demo shows</div>
4
    <div style="view-transition-name: b" id="blue">a basic example</div>
5
    <div style="view-transition-name: c" id="green"><br/><br/>of view transitions</div>
6
    <button />
7
  </body>
8
</html>

It also defines three transition groups with the names a, b and c. Normally, the browser would also define a fourth transition group called root for the <html> document element. But since we give the <html> element an explicit view-transition-name, this overrides the default. Choosing the special name none tells the browser that we don’t need a group here at all.

And here is the styling:

demo.css
1
::view-transition-group(*) {
2
  animation-duration: 1s;
3
}
4


5
div {
10 collapsed lines
6
  color: white;
7
  display: grid;
8
  place-items: center;
9
  padding: 1ex;
10
  width: 30%;
11
  height: 30%;
12
  position: absolute;
13
  border: 1pt solid #888;
14
  border-radius: 10%;
15
  box-shadow: 2px 2px 2px 2px #8888;
16
}
17
#red {
18
  background-color: #800;
19
  top: 15%;
20
  left: 10%;
21
  width: 25%;
22
  height: 25%;
23
}
24
#blue {
25
  background-color: #008;
26
  top: 10%;
27
  right: 10%;
28
  transform: rotateZ(90deg);
29
}
30
#green {
31
  background-color: #080;
32
  bottom: 10%;
33
  left: 35%;
34
  width: 35%;
35
  height: 35%;
36
}
37
button {
11 collapsed lines
38
  view-transition-name: d;
39
  background-color: blanchedalmond;
40
  color: black;
41
  padding: 1ex;
42
  border-radius: 50%;
43
  position: absolute;
44
  bottom: 35%;
45
  left: 35%;
46
  width: 30%;
47
  height: 30%;
48
  box-shadow: 2px 2px 2px 2px #8888;
49
}
50
button::before {
51
  content: "Press Me!";
52
}
53
@supports not (view-transition-name: a) {
54
  button {
4 collapsed lines
55
    width: 70%;
56
    height: 70%;
57
    top: 15%;
58
    left: 15%;
59
  }
60
  button::before {
61
    content: "Sorry, your browser does not have native support for view transitions.";
62
  }
63
}

The Update Callback

When the button is pressed, the following code performs a triple swap of the view transition names of the divs.

demo.js
5 collapsed lines
1
  const button = document.querySelector("button") as HTMLButtonElement;
2
  const red = document.querySelector("#red") as HTMLDivElement;
3
  const blue = document.querySelector("#blue") as HTMLDivElement;
4
  const green = document.querySelector("#green") as HTMLDivElement;
5
  button.addEventListener("click", () => {
6
    const save = red.style.viewTransitionName;
7
    document.startViewTransition(() => {
8
      [
9
        red.style.viewTransitionName,
10
        green.style.viewTransitionName,
11
        blue.style.viewTransitionName,
12
      ] = [
13
        green.style.viewTransitionName,
14
        blue.style.viewTransitionName,
15
        red.style.viewTransitionName,
16
      ];
17
    });
18
  });

Rotating the names of the view transitions means that the positions of the old and new images differ for each view transition name!

The Morph Animations

In each transition group, both the old and the new image are placed at the position of the old image. The new image is drawn over the old image. At the start of the transition, however, it is still invisible (opacity 0) and only the old image is visible.

Now the red div has to go where the blue one was, the blue one goes to the position of the green one and the green one goes to the former position of the red one.

On this way, the old image is gradually faded out and the new image is gradually faded in. In the middle of the transition, both images are blended 50/50. At the end of the transition, the old image has completely disappeared and the new image has reached its target position with full opacity.

Blue also differs from red by an additional rotation transformation. The animation therefore also includes the interpolation of this transformation.

If we switch off the fade animations of the new elements for a moment …

switch-fade-off.css
1
::view-transition-new(*) {
2
  animation: none;
3
}

… you can better see what happens:

At the start of the animation, the new blue image appears in place of the old red image. As it is drawn over the old image, only the blue image is visible. Both images now move to the target position. Without any fade-out effect on the new image, you can not see the old image underneath.

The *-new and *-old Image Animation

For the next example, we call document.startViewTransition() without an update callback. Yes, this is also possible. What can we see without updating the DOM? We won’t see morph animations, as these require a change in position, size or other CSS properties between the old and new state to be recognizable. But we might see the default fade-in animations. To make them visible, we change the CSS a little again:

show-fades.css
1
::view-transition-new(a) {
2
  visibility: hidden;
3
}
4
::view-transition-old(b) {
5
  visibility: hidden;
6
}

So during the animations, we completely hide the new red image and the old blue image.

When you press the button, you see that the old red image fades out, the new blue image fades in. And the green image? Here the new image fades in while the old image fades out. If you want to know why this double fade does not yield any flicker or color shifts, search the view transition CSS spec↗ for mix-blend-mode and plus-lighter.

Fading is only the default animation for the ::view-transition-new(*) and ::view-transition-old(*) animations. You can define whatever your creativity comes up with. You can play with shifting effects or other transformations such as rotating or scaling. You can combine multiple animations and use @keyframe definitions with multiple steps.

Did you notice …

… that in all demos on this page, the button stayed above the animated elements? Wasn’t it true that all ::view-transition-old and ::view-transition-new images are placed in a extra stacking context, the view transition layer, that sits above all page content? How is it that the button is not obscured by the <div> elements during animation?

Have a look at line 38 in the CSS in this section.. The button defines its own transition group. The stacking of the replaced elements in the view transition layer is the same as that of the original elements in the document. The old and new images of the button are never moved. They just fade out and in in place like the green box in the last example. The over all visual effect is that the button isn’t animated at all and sits above all other elements.