Create useful and minimal page/view transitions on your site with just two lines of CSS. Enhance the user experience by making page navigation feel more fluid and intuitive. Let’s go!
History
When I first saw Jake Archibald’s demo of native view transitions I immediately felt like this was gonna change the web for good. Not only are view transitions a way to improve user experience. By maintaining context and continuity they can help reducing cognitive load through the flow of an application.
For some time, view transitions were excuse for building everything with heavy single page application frameworks because if you technically never leave the page, transitioning elements from one place/size to another is easy. Is it?
And do you remember the page transitions Internet Explorer had back in the day ? Sorry, I was getting carried away by old people stuff…
What are view transitions?
View transitions are dynamic animations that help navigate between different screens, pages, or states in an application by visually transitioning elements in a way that preserves context and continuity. These transitions can include fading, sliding, or morphing elements to indicate changes, improving the user experience by making interactions more fluid and visually coherent.
In a browser context, this means that there is a possibility to control the appearance of an element after clicking on a link until the new page is loaded. You could also animate the whole page.
Single page then multi page
When the view transitions API was first announced, the first implementation was only capable of transitioning elements on single page applications. Not so useful if you ask me, since you could to that with SPAs already. But the big promise was that this API was coming for multi page applications as well. To be honest, when I heard that Jake was leaving Google, I thought MPA view transitions would never see the light of day. But with the release of Chrome 125, Cross Document View transitions are available in Chrome, Edge etc. they are available for testing. Though view transitions have not been selected for Interop 2024 and so won’t appear in all major browsers soon, they’re a perfect Progressive Enhancement opportunity you don’t want to miss </sellers-voice>.
Let’s build something!
For the simplest [multi page|cross document] view transition without any JavaScript you first need at least two HTML pages with links to each other. To opt-in to view transitions, just put this snippet in your CSS:
@view-transition {
navigation: auto;
}
We could be done here. Now the browser fades from one page to the next. If you want to transition an element after clicking a link, you simply give it the same view-transition-name in your CSS. That is enough to make the browser know it should animate the element between its size and position when navigating around.
In my case I wanted a <span class=”border”>, that mimics a border under a link, to move to the active link after clicking. This <span> element is inside the currently active <a> element on every page.
.border {
view-transition-name: navborder;
}
That is enough for the browser to know what to do. Pretty neat, right?
Demo
To see this in action I built a small demo with three pages. Have fun!
Simple vs. complex
This is just a simple demo of what can be done with the view transitions API. If you read the MDN article you will see there are endless possibilities to control every last bit view transitions. You cannot only define the animation transitions, durations and affected elements. There are also JavaScript methods to do all that programmatically.
👋 Moritz Glantz is my name…
…and I am an Specialist for Web Accessibility and UX-Engineer with over 20 years of experience, by day and a podcaster by night.
I help organizations build accessible websites by offering talks about accessibility, workshops & trainings, accessibility reviews and developing strategies for developers and management.
If that sounds like you could use my help, let’s talk! 💬
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.