34 / MOTION
Shared Element Transition
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
Task: Open an item into its detail view.
NAIVE
shared idFALSE
opennone
THOUGHTFUL
shared idTRUE
opennone
Play with the values
260
30
How it works
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.