58 Shared Element Transition. 58 of 95.
58/MOTION/58 of 95
Shared Element Transition
The same object should stay the same object across views.
The problem
Navigating from a list to a detail view re-renders everything, so the item you tapped seems to vanish and reappear.
The solution
The selected item morphs continuously into the detail view.
Experiment
Play with the values
260
30
How it works
- Selecting an item is a change of view for the same object, not a new object.
- A shared layout id matches the source and the detail representation.
- The source rectangle is measured where the user clicked.
- The element animates from that rectangle to the detail rectangle.
- It settles in the detail view as one continuous object.
Seen in
Photo galleries
A thumbnail expands into the full image, preserving spatial identity.
Product cards
Tapping a product animates its image into the product page.
Music players
Album art flies from a mini player into the now-playing screen.
Card ↔ modal
A card expands into a modal so the origin remains obvious.