Container transform
A motion where one element morphs into a new view, preserving its identity as it grows.
Tap a card; the card itself expands and reshapes into the full detail view. Tap close; it shrinks back to its original size and position. The continuity tells the user that the new view came *from* the card, not from elsewhere. Material Design formalizes this as 'container transform'; the CSS View Transitions API now ships a web-native way to build similar effects.
Also called
context transitionexpand transition
When to use
- Card-to-detail transitions where preserving identity helps orientation
- Image grid → full-image viewer animations
- Component-to-component morphs where the element is recognizable in both states
When not to use
- Transitions between unrelated views — the morph would feel arbitrary
- Performance-constrained contexts where the morph would stutter
Related
Source
Material Design ('Container transform'). The CSS View Transitions API enables it on the web.