Smoothness at Page Level

Previously, for smooth transition between two page states (e.g., from list to product card), complex JS was needed. Now there's View Transitions API.

How It Works:

When you change DOM (or simply transition between pages), browser makes " micro-screenshot " of old state and animates its transformation into new.

// In JavaScript this is launched like this:
document.startViewTransition(() => {
  renderNewContent(); // Change content
});

Configuration in CSS:

You can specify which exactly elements should " flow " into each other using view-transition-name property.

.product-card {
  view-transition-name: card-active;
}