View transitions are the first new animation primitive on the web in a decade that actually changes how I design.
I spent a month using them on a real product, not a demo. Here’s the unglamorous version.
What they’re good for
- Cross-document persistence: an element that exists on two routes can morph between them.
- Hierarchy reveals: an item in a list becoming the detail view, gracefully.
- Cheap polish: tasteful crossfades cost two lines of CSS now.
What they’re bad at
- Anything stateful underneath the transition. React doesn’t know you’re transitioning, so it keeps doing React things and the morph breaks.
- Long animations. Anything past 400ms starts to feel like waiting.
- Accessibility. Reduced-motion is respected, but the default API doesn’t give you enough hooks to design a graceful fallback.
My rule
If the transition can’t be explained in one sentence — what is changing, and why — it’s the wrong tool.