Demonstrates how to fake two-phase view transitions using the Navigation API's precommitHandler feature. The technique allows transitions to start immediately after clicking a link, showing an intermediate loading state before the new page loads. This is achieved by chaining two view transitions: an outgoing transition that fades to a loading screen, followed by an incoming transition that displays the new content. The precommitHandler defers navigation commit until content is fetched, enabling proper cancellation if users navigate away. Currently only works in Chrome 141+.

6m read timeFrom bram.us
Post cover image
Table of contents
Two-Phase View TransitionsThe Navigation API’s precommitHandlerView Transitions + precommitHandler = Faked Two-Phase View TransitionsSo we can use this?

Sort: