Shared element transition
The same element visually travels and morphs from one screen to the next, so a thumbnail grows into the full page.
See it
What it is
One element is treated as the same object across two states, so it travels and reshapes between them instead of the screen cutting. Tap a photo in a grid and it expands into the detail view; the mini player grows into the full player. Keynote calls it Magic Move, Android calls them shared element transitions, and the effect sells continuity: the user never loses the thing they were looking at.
On the web you get it from Framer Motion by giving both elements the same 'layoutId', or from the View Transitions API by giving both the same 'view-transition-name'. Under the hood it is FLIP or a crossfade between two snapshots. Best uses: grid to detail, list row to page, collapsed card to expanded card, tab indicator sliding between tabs.
Gotcha: the naming rules are opposite in the two tools, and people carry the wrong one across. With the View Transitions API a 'view-transition-name' has to be unique among rendered elements at snapshot time; two elements claiming the same name skips the whole transition, which happens easily when the old route unmounts a frame late. With Motion, two elements sharing a 'layoutId' is exactly how the handoff works: it hands position from one to the other and crossfades them, so the failure there is a third claimant or a stale copy you forgot to unmount. Also, if the two elements have very different aspect ratios the morph reads as a stretch, so crop with 'object-fit: cover' on both ends and let the frame change shape rather than the image.
Ask AI for it
Implement a shared element transition from the image grid to the detail page: the tapped thumbnail should expand and move into the detail hero position over 350ms with an ease-out curve while the rest of the page crossfades. Use Framer Motion with a matching 'layoutId' on both elements (or matching 'view-transition-name' values with the View Transitions API). If you go the Motion route, the two paired elements should share the 'layoutId' and no stale third copy should linger; if you go the View Transitions route, no two rendered elements may share a 'view-transition-name' at snapshot time. Use 'object-fit: cover' on both so the crop morphs instead of the image stretching, and reverse the same transition on back navigation.