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

Geometric mask reveals—such as diamond expansions, angled split reveals, and polygonal wipe animations—deliver striking visual transitions across document navigations. With Chromium’s View Transition API, applying animated clip-path: polygon(...) rules directly to ::view-transition-old and ::view-transition-new ensures smooth GPU-accelerated path interpolations without mutating DOM element geometry.

Polygon Interpolation Rules in Chromium

For CSS clip-path: polygon() animations to interpolate smoothly without raster popping, both outgoing and incoming keyframes must define the exact same number of vertex coordinates in identical clockwise winding orders. If vertex counts diverge, Chromium falls back to instantaneous discrete step transitions.

Configuring Strict Polygonal Wipe Keyframes

Author balanced six-vertex polygon animations in your CSS stylesheet:

::view-transition-old(polygon-wipe) {
  animation: 360ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both polygonWipeOut;
}

::view-transition-new(polygon-wipe) {
  animation: 360ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both polygonWipeIn;
}

@keyframes polygonWipeOut {
  from {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 0% 50%);
    opacity: 1;
  }
  to {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0.2;
  }
}

@keyframes polygonWipeIn {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0.2;
  }
  to {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 0% 50%);
    opacity: 1;
  }
}

Compositor and Antialiasing Optimisation

To eliminate jagged edges along diagonal polygon cut-lines during snapshot interpolation, append a microscopic drop-shadow or outline to the pseudo-element:

::view-transition-old(polygon-wipe),
::view-transition-new(polygon-wipe) {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.05));
  will-change: clip-path;
}

Chrome DevTools Inspection

Open Chrome DevTools > Animations drawer and scrub the polygon animation timeline to confirm continuous sub-pixel path interpolation across all target viewports.