View Transitions

1
import { ViewTransition } from 'react';
2

3
<Link
4
  href={`/view-transitions/posts/${product.id}`}
5
  transitionTypes={['transition-to-detail']}
6
>
7
  // !mark
8
  <ViewTransition name={`product-${product.id}`} share="animate-morph">
9
    <ProductImage />
10
  </ViewTransition>
11
</Link>;

Demo

• A shop with a product grid. Clicking a product navigates to its detail page and back.
• The product image and the "Shop" title morph between the list and detail views, since each side wraps them in a <ViewTransition> with a matching name.
• Whole-page slides are directional: list → detail slides in from the right, detail → list from the left, and the Previous/Next pagination slides backwards/forwards. Each <Link> picks the animation by passing a transitionTypes value.