Smooth and simple page transitions with the shared element transition API

When you navigate around apps on your phone, there's usually some sort of transition, from a simple fade or slide from one screen to another, to more complex transitions that move different elements independently:

Although, on the web, we don't tend to get those kinds of effects. Creating a transition from one page to another after clicking a link is, well, impossible. But, it isn't exactly easy within a single-page app either.

Even in a simple case, where content fades from one screen to another, it means rendering your page with both states at once, performing a cross-fade, then removing the old state.

This is harder than it sounds. You need to make sure that the outgoing page can't receive additional interactions, and that the outgoing state doesn't jank the transition by updating its own state. You also need to ensure the presence of both states doesn't create a confusing experience for those using accessibility technology.

Platforms like Android and iOS have tools to make this stuff easier, so why can't we? That's where the shared element transitions API comes in! It's a proposal we're working on that provides a high-level way to transition between page states.

Leave a Comment