When a morph silently fails
Three wiring mistakes that leave a shared element jumping.
React docsreact.dev
It's important that there's only one thing with the same name mounted at a time in the entire app.
From vercel-react-view-transitions, troubleshooting.md.
Three ways to break a pair
Pick a mistake, then open the photo.
BrokenBad
FixedGood
Why it matters, pros and cons
Why it matters
A pair forms only when exactly one boundary with the name leaves, one arrives, and share resolves to a class. Miss any and the photo jumps.
Pros
- Prefix names with the id:
photo-${id}. - Write
sharewheneverdefaultis none. - Every link that should morph carries its type.
Cons
- Browser back carries no types; untyped morphs still play.
- A reusable component can't own a fixed name.
- A conditional name is one more prop to thread.