Motion · Scroll & Layout
Layout Shift
An element morphs from its place in a grid into a detail view. The user never loses track of what they opened.
Specs#
| Technique | Shared layoutId |
| Spring | duration 0.4, bounce 0.1 |
| Backdrop | opacity, 200ms |
| Close | Escape, backdrop click |
| Built with | Motion |
Guidelines#
Use for
- Gallery → detail, card → expanded card
- Reordering and filtering lists
Avoid
- Morphing between unrelated elements
- Text reflowing during the morph — fade it in after