Shared Element Transitions

Slowly evolving into a jaded mid-career software developer but new web APIs like the Shared Element Transitions API presented by Jake Archibald put a spring in my step. This is too cool.

The API exposes a set of pseudoelements representing snapshots of the outgoing and incoming pages, but the real trick here is that you can break up those snapshots into parts in such a way that you can Share those Elements across page Transitions, animating them from one state to another. This way, you can animate whole pages in & out, but also animate parts of the page—like transitioning a video thumbnail on the outgoing page, into a full video player on the incoming.

I'm not sure how it'll handle transitioning elements that are themselves changing—for example, if the video in the example above were already playing—but I'm confident that Google's working on it.

Shared Element Transitions, Jake Archibald @ Google I/O

Further reading: Jake Archibald's proposal for a similar API, combining the Shared Element Transitions and Navigation APIs from five (!) years ago.