Crafting UI

.element {
  animation: progress linear both;
  animation-timeline: scroll(block root);
}

.element {
  animation: progress linear both;
  animation-timeline: scroll(); /* nearest */
}

.element {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

h1 {
  animation: ;
  animation-timeline: ;
  animation-range: ;
}

section > * {
  animation:
    entry linear,
    exit linear;
  animation-timeline: view();
  animation-range: [...];
}

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

btn.addEventListener("click", () => {
  document.startViewTransition(_ => grid.classList.toggle("col-count"));
});

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

btn.addEventListener("click", () => {
  if (document.startViewTransition) {
    document.startViewTransition(_ => grid.classList.toggle("col-count"));
  } else {
    grid.classList.toggle("col-count");
  }
});

.box-1 {
  view-transition-name: box-1;
}

::view-transition-new(box-1) {
  animation: scale-in .5s both;
}

::view-transition-old(box-1) {
  animation: scale-in .5s both reverse;
}

@view-transition {
  navigation: auto;
}

<span>⚓️ Anker</span>

<div>
  <h2>Heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe.</p>
</div>

[popover] {
  position-area: top;
}

button {
  position: fixed;
}