Living the SPA dream

I’ve been around web development for a couple of years now and lived the single page application (SPA) dream. Watching a site use the old full-page reload felt like visiting a museum. So when I stumbled upon View Transitions, I was thrilled.

I was able to get the same SPA-like transitions in my vanilla projects now!

The best part is how simple they are to implement. Here’s all you need to add to your CSS:

How to enable view transitions

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

This code enables view transitions between pages in your web application. Elements that exist on both pages will appear to morph from one state to another.

It does this only for users who haven’t requested reduced motion, ensuring your site respects accessibility preferences.

That’s it! Your site now supports view transitions while maintaining a great experience for all users.

What’s more about them?

There is much more to view transitions than that, like transitioning specific elements and handling their state changes between pages, but personally I find these 3 lines of css to be the greatest feature of it.

You can explore more about view transitions in the MDN documentation.