Shared element transition
A transition where an element persists visually across two views, moving from its position in one to its position in the next.
A thumbnail in a list animates into the same image in the detail view; a title at the top of one page slides into the header of the next. The element keeps its identity rather than disappearing and reappearing, which preserves the user's mental thread between screens. On Android this is built into the platform via shared element transitions; on the web, the CSS View Transitions API now ships an equivalent.
Also called
shared axis transitioncontinuity transition
When to use
- Image or card → detail view transitions where the element should feel continuous
- Page-to-page transitions where a header or thumbnail repeats
- Anywhere preserving identity reduces the cost of context switching
When not to use
- Transitions between fundamentally different views with no shared element
- Performance-constrained contexts where the morph would stutter
Related
Source
Android / Material Design ('Shared element transitions'). On the web: the CSS View Transitions API.