When a shared element cannot map, fall back to an ordinary transition
Aliases: shared-element fallback · unmatched hero · degraded transition
What it is
A shared element needs both ends to point at the same surface. When a list row has been recycled, the image is still downloading, the source has scrolled off-screen, or the aspect ratios cannot meet, correspondence does not exist geometrically. Forcing a morph then is not identity continuity; it is two things melting. Failure needs a fallback to an ordinary transition — a fade, a directional slide, even a cut — so two complete states appear in sequence, which is better than one false in-between object.
Why it happens
The rendering layer pairs by id or by geometric anchors. When pairing misses, implementations often interpolate the nearest view of the same type, or an empty rectangle, and the user sees an unrelated card fly into detail, or a blank frame inflate. A wrong correspondence is costlier than none: it writes a false object file, and a later return hunts the wrong row.
An ordinary transition does not promise an identity weld, only that “the page is changing.” A fade keeps two complete surfaces; a directional slide can still keep hierarchical direction. Both carry less information than a successful shared element, but they do not lie. Fallback is not an excuse to cheapen the experience; it is stopping forgery when the correspondence premise is gone.
Where it stops holding
- If the source is only briefly off-screen and will return, it can be worth waiting for it to enter the viewport before sharing; waiting too long becomes a fake delay.
- When both ends are different crops of the same image, a cross-fade rather than a geometric morph is still a fallback, not a stretch.
- If the product has no directional convention, falling back to a slide introduces a new spatial lie; a fade is safer.
Applying it
- Before pairing, check that the source view is still in the tree, the image is decoded, and the size ratio is acceptable. Any failure should take a fade or the existing page transition.
- Do not substitute a neighbouring item for a missing source.
- Check: force image load failure, recycle the source row, and scroll the source off-screen, then open detail each time. Flying the wrong card or stretching a blank frame means the fallback branch never engaged.
Related
- Same group: F7.04.1 A shared element keeps the object's identity continuous · F7.04.2 Extreme size change in a shared element distorts identity
- Nearby: F7.05 Enter and exit direction · F7.06.3 Padding delay with motion is a net loss
- Search terms:
shared-element fallback·object correspondence·cross-fade