Kevin Powell - Community•14mo ago

Struggling with the new view transitions API

Hi! I am exploring the View transitions API. I have a simple demo with just a box that changes background-color and width on click. Since I see some things I don't understand (the height also changes during animation) I wanted to try to debug/replay it in the browser dev tools. EDIT: I kinda solved it, but I am struggling with the API itself. Please jump down to the latest reply I open the Animations drawer, I click the box, I record the animation, I see it right there. But I cannot figure out how to "replay it". When I click play, change speed, or draw manually, nothing happens in the main browser window. I don't understand. What do I have to do to actually see the animation being replayed. Anyone else here exploring the the animations dev tools, who could explain how to use it?

3 Replies

einarperssonOP•14mo ago

Okey, now I'm starting to understand the problem. I am able to do what I want for normal transitions. But for the ::view-transitions I am not able to replay it.

einarperssonOP•14mo ago

Gah I am so annoyed. Web Animations API is praised, but I am not able to do a simple thing like this: 1. Change background color smoothly (CHECK!) 2. Change width (NO!) The animation "jumps" and the boxes are twice as high during the animation since they stack

import "./style.css";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div>
    <div id="box"/>
  </div>
`;

document
  .querySelector<HTMLDivElement>("#box")!
  .addEventListener("click", (ev) => {
    const currentTarget = ev.currentTarget as HTMLDivElement;

    document.startViewTransition(() => {
      currentTarget.style.backgroundColor =
        currentTarget.style.backgroundColor === "coral" ? "blue" : "coral";

      currentTarget.style.width =
        currentTarget.style.width === "100px" ? "200px" : "100px";
    });
  });

import "./style.css";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div>
    <div id="box"/>
  </div>
`;

document
  .querySelector<HTMLDivElement>("#box")!
  .addEventListener("click", (ev) => {
    const currentTarget = ev.currentTarget as HTMLDivElement;

    document.startViewTransition(() => {
      currentTarget.style.backgroundColor =
        currentTarget.style.backgroundColor === "coral" ? "blue" : "coral";

      currentTarget.style.width =
        currentTarget.style.width === "100px" ? "200px" : "100px";
    });
  });

#box {
  view-transition-name: box;
  background-color: coral;
  width: 500px;
  height: 200px;
}

::view-transition-old(box),
::view-transition-new(box) {
  animation-duration: 1s;
}

#box {
  view-transition-name: box;
  background-color: coral;
  width: 500px;
  height: 200px;
}

::view-transition-old(box),
::view-transition-new(box) {
  animation-duration: 1s;
}

einarperssonOP•14mo ago

Specifying a height solved it, but I don't reaally understand why and how this cannot be mentioned anywhere. The docs really need more basic examples and pitfalls...

::view-transition-old(box),
::view-transition-new(box) {
  animation-duration: 1s;
  height: 100%;
}

::view-transition-old(box),
::view-transition-new(box) {
  animation-duration: 1s;
  height: 100%;
}

Gaming

Programming

Struggling with the new view transitions API