web-developmentOctober 3, 20267 min

View Transitions API for Shops: Animate List to Detail Without Heavy JS

By Arash Latifi

Use View Transitions API to morph product cards to detail headers with one line of CSS — no Framer Motion, no lag.

TL;DR: document.startViewTransition morphs a product image from grid to detail header — 3KB vs 40KB JS.

Why?

Framer Motion for a simple morph costs 40KB. View Transitions is native.

Implementation

Checklist

[ ] Unique viewTransitionName per product
[ ] Test in Chrome/Safari — Firefox fallback
[ ] No extra use client

FAQ

Does SEO break? No — only animation, HTML stays same.

Works with PPR? Yes — transition works over streams.

Cost? Zero JS.

TSX

// app/shop/ProductCard.tsx
export function ProductCard({ id, src }: { id: string; src: string }) {
  return (
    <a href={`/shop/${id}`} style={{ viewTransitionName: `product-${id}` }}>
      <img src={src} alt="" style={{ viewTransitionName: `img-${id}` }} />
    </a>
  );
}

// app/shop/[id]/page.tsx
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <img src={`/p-${id}.jpg`} style={{ viewTransitionName: `img-${id}` }} />;
}

The DevArt | Arash Latifi

Corporate & Personal

Medical & Real Estate

E-commerce

Cities

View Transitions API for Shops: Animate List to Detail Without Heavy JS

Why?

Implementation

Checklist

FAQ

View Transitions API for Shops: Animate List to Detail Without Heavy JS

Why?

Implementation

Checklist

FAQ