Page Transitions Still Feel Like a Workaround
Animating between pages on the web — without committing to a JavaScript framework or a pile of hacks — remains frustratingly out of reach. What would be ideal is an API that lets you run something like Web Animations API (WAAPI) code before a page unloads, then more after the next page arrives, all while using plain anchor links and standard page loads. The platform already gives us onbeforeunload, but that comes with baggage, and what we really need are purpose-built APIs that account for performance (as snappy as a normal link click) and accessibility (proper focus handling).
Single-page apps do offer the freedom to animate view changes because the page never reloads. But choosing that architecture just to get transitions is a heavy price: you inherit tooling complexity and accessibility pitfalls that a traditional multi-page site wouldn’t have. There are alternatives that avoid a full SPA. Turbo paired with animate.css can get you part of the way, as can Adam’s clip-path()-based transition.style (a tribute to Daniel Edan’s work). If you throw instant.page into the mix, that could feel nearly as fast as a regular internal link.
Libraries like smoothState.js and Swup take another approach: intercept the navigation, play an exit animation, load the next page, then animate it in. Sure, it technically adds a little delay, but the motion can mask it well enough that perceived performance may actually improve. The bigger dream, however, isn’t just sliding the whole page — it’s having total control to craft more interesting, selective transitions, like moving specific elements rather than the entire viewport. That’s not a new idea; people were doing it a decade ago, even for use cases like keeping audio playing while navigating a musician’s site.
This feels like a natural place for the browser platform to step in. Jake Archibald pushed for navigation transitions years ago, though it’s unclear if that went anywhere. Portals came along as a possible answer — essentially loading an iframe and animating it to take over the page while updating the URL. But portals don’t offer much animation nuance beyond swiping or fading an entire page in and out, similar to what jQuery Mobile did in its day. Other attempts like Highway.js exist, but they all rely on the same interception pattern rather than native support.
The web platform is overdue for a first-class solution here — something that gives us clean, understandable functions with performance and accessibility built in, so we don’t have to gamble on an architecture or a third-party library just to make a transition feel nice.
