Shared Element Transition

What it is. A shared element transition animates one specific UI component from its starting position size and state to its ending position size and state without ever breaking visual continuity. The thumbnail you tap does not vanish then pop up somewhere else. It travels scales rotates or changes shape while the system calculates the delta between the two bounding rectangles and interpolates on the GPU. By 2026 this pattern depends on layout measurement before navigation starts followed by a 300 to 400 millisecond animation on the ease.standard cubic-bezier curve pulled from your motion tokens. The rest of the UI coordinates around it with staggered opacity or slide moves. This technique turns abstract screen changes into physical object persistence. Designers stop thinking in pages and start thinking in scenes and actors. The card is the actor. The list view is scene one. The detail view is scene two. The transition is the direction that tells the story. Implementation in code is no longer exotic. React teams drop the same layoutId on both elements in Framer Motion and let the library handle the rest. Flutter teams use Hero widgets with matching tags. SwiftUI uses matchedGeometryEffect inside a namespace. These tools removed the old excuses yet most teams still skip the pattern because it forces early collaboration between design and engineering instead of late stage decoration.

What it isn't. A shared element transition is not a crossfade between two unrelated screens or a generic slide pushed from the right. Those are basic navigation moves that communicate far less. It is not morphing one shape into a completely different shape like an SVG play icon turning into pause bars. That is shape tweening and serves a different job. It is not the spring bounce you add to a button or the staggered list reveal on page load. Those are micro interactions and entrance patterns. Shared element transitions demand the element be semantically identical in both views. They also carry real cost in layout thrashing measurement passes and temporary absolute layering during flight. They are not something to sprinkle on every list item in a 50 row table or every card in an infinite feed. That destroys scroll performance and battery on midrange Android devices that still dominate the market. They are not a fix for bad information architecture and they are not exempt from the prefers-reduced-motion contract. If you cannot gracefully degrade to an opacity shift plus 98 to 100 percent scale then you have not finished the work.

Concrete example. Open Spotify in 2026 and tap any album cover in your library. That exact square image scales and moves into the center of the full player view while the track list slides up and the background color shifts in sync. The cover never cuts away. Every pixel stays alive. The animation lasts 380 milliseconds on the standard easing curve and respects the spatial model by growing forward from the list. Linear shipped a cleaner version in their 2024 issue tracker. Click any task row in the backlog. That row stretches horizontally fills the right pane and its status pill and assignee avatar travel with it while the comment thread fades in below. The shared title text even keeps cursor position if you were editing inline. Users report they stay oriented even when jumping between twenty tasks in a sprint. Figma 2025 took it further in their component library. Drag a master component from the assets panel onto the canvas and the instance on stage highlights by scaling the exact element up from its thumbnail preview to full size with a brief halo pulse. The reverse works when you update the master. Nike SNKRS in early 2026 uses it on product drops. Tap a shoe in the feed and the exact product render flies forward enlarges rotates to match the hero angle and lands as the detail image while size selectors slide up from the bottom. Internal tests showed an 18 percent lift in completed purchases because buyers never lost which shoe they were looking at. Each of these ships inside a motion token system so the durations and curves never drift when the team doubles in size.

When to use / when not to. Use shared element transitions on signature flows that users repeat daily or that drive revenue. Onboarding tours benefit because continuity removes doubt. Key conversion steps like product list to cart or search result to checkout justify the engineering time. Deploy them in media apps where the content itself is the visual anchor such as photos in Instagram or album art in Apple Music. They are the purest expression of motion principle six because they reinforce the spatial model instead of decorating it. Pay the cost when metrics show users get lost between views or when the pattern becomes part of your brand behavior like Duolingo sending the owl character from a lesson complete banner into a full screen celebration. Test them early with real devices not just your MacBook because the delta calculation feels different on a Pixel 7 under load.

Do not use them on dense enterprise dashboards where traders or doctors value raw speed over delight. Bloomberg terminals in 2026 still favor instant snaps with strong color feedback. Skip them when the element changes too dramatically between states or when the target view might fail to load due to network conditions. A shared transition with no target looks like a bug. Never run more than one at a time because the attention budget collapses and the user no longer knows where to focus. Always ship the reduced-motion fallback that swaps the travel for a simple fade and micro scale. If your frontend team cannot hit consistent 60 frames per second across iOS Android and web then cut the pattern until the infrastructure improves.

Shared element transitions turn abstract navigation into persistent physical objects that make every other motion pattern feel like decoration.