How to Configure Strict CSS View-Transition-Old and New Clip-Path Circles in Google Chrome

Circular iris reveals—reminiscent of camera shutters and focal zoom navigation—provide engaging focal-point transitions across document navigations. With Chromium’s View Transition API, applying animated clip-path: circle(...) rules directly to ::view-transition-old and ::view-transition-new delivers smooth, hardware-accelerated focal masks without re-rendering underlying DOM tree hierarchies.

Circular Iris Geometry in Chromium View Transitions

Chromium calculates clip-path coordinates relative to the snapshot layer. When authoring an iris reveal, defining precise focal coordinates (such as circle(0% at center) to circle(150% at center)) ensures the circular mask expands seamlessly to envelop viewport corners without snapping or abrupt boundary clipping.

Authoring Strict Circular Iris Keyframes

Configure complementary circular iris keyframes in your stylesheet:

::view-transition-old(iris-reveal) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both irisOut;
}

::view-transition-new(iris-reveal) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both irisIn;
}

@keyframes irisOut {
  from {
    clip-path: circle(150% at 50% 50%);
    opacity: 1;
  }
  to {
    clip-path: circle(0% at 50% 50%);
    opacity: 0.2;
  }
}

@keyframes irisIn {
  from {
    clip-path: circle(0% at 50% 50%);
    opacity: 0.2;
  }
  to {
    clip-path: circle(150% at 50% 50%);
    opacity: 1;
  }
}

Dynamic Cursor-Centred Iris Transitions

To anchor the iris expansion directly to the user’s cursor position or interaction target, pass dynamic CSS custom properties via JavaScript prior to initiating the transition:

document.addEventListener('click', (e) => {
  const xPercent = (e.clientX / window.innerWidth) * 100;
  const yPercent = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--click-x', `${xPercent}%`);
  document.documentElement.style.setProperty('--click-y', `${yPercent}%`);

  document.startViewTransition(() => {
    updateDomContent();
  });
});

Auditing in Chrome DevTools

Open Chrome DevTools > Animations drawer and verify that the circular mask interpolates smoothly without triggering layout invalidations or dropped frames.