← Back to gallery
CSSFeatured

Shared Element Layout Transition

Progressively enhanced gallery-to-detail motion with same-document View Transition API fallbacks.

layout-transitionshared-elementview-transitions

Layout transition / shared element transition

View Transition API showcase

Reimplements same-document view transitions with a dense gallery, a featured destination, and stable fallbacks when the API is unavailable.

Shared snapshot card

Gallery Grid

Keeps the cover, title block, and tags readable while the grid cell grows into a hero-sized card.

  • grid reorder
  • shared title
  • tag chips

Sidebar destination

Inspector Rail

Good for dashboards that pin one item while the surrounding collection continues to flow.

  • sidebar pin
  • preview rail
  • detail focus

Dialog landing

Dialog Landing

Useful when you want a shared card to bloom into a higher-fidelity state instead of navigating away.

  • dialog bloom
  • overlay
  • context retained

Shared element inspector

Gallery Grid

  • grid reorder
  • shared title
  • tag chips

Keeps the cover, title block, and tags readable while the grid cell grows into a hero-sized card.

.view-transition--gallery {
  view-transition-name: preview-gallery-grid;
}

.pattern-title {
  view-transition-name: title-gallery-grid;
}

@supports (view-transition-name: demo) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 5200ms;
    animation-timing-function: ease;
  }
}

.pattern-preview--animated {
  animation: shared-preview-loop 5200ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite alternate both;
}

.pattern-preview--inspector {
  transform: scale(1.00);
}