Animate Page Navigation with View Transition API
Animating page transitions has always been a weakness of web applications' user experience. Creating nice and seamless transitions required a lot of effort. Thankfully, this is about to change with a new browser feature called the View Transition API.
What is the View Transition API?
The View Transition API is a way of animating page changes. You can think of it as changing sequences in video-editing software - you may want video clips transition to be gradual over time (like transitioning though opacity). In web, you can now involve animating the whole viewport or just particular elements.
Important notes:
1. Before we even start, be aware that it's not fully supported at the time of posting - Mozilla Firefox doesn't support it at all. You might want to check current progress here.
2. For the following examples, we will be using a multi-page application. If you are using SPA routers, you will likely need to get familiar with JavaScript-triggered transitions.
Example
Let's try it with some real-world examples. Say we are running a dog shelter with a list of dogs and a details page for each of them. It looks like this:
Okay, I may not be the best at choosing colors, but this is just to give you a general idea. The animation so far seems... there is actually none. We want to make the page impressive so that we find new homes for our little buddies. Let's crank that transition up!
The simplest use would be animating page changes through a cross-fade effect, which gradually lowers the opacity of the starting page while increasing it on the destination page at the same time. This is the default transition for View Transition API.
Now, the implementation varies depending on application architecture. If you're using a Multi-Page Application, all you need is a simple CSS rule in your stylesheets:
@view-transition {
navigation: auto;
}
As you can see, we now have a smooth transition. Pretty basic, but we can enhance that! The View Transition API provides a way to use regular keyframes on a couple of specific pseudo-elements that are now available.
@view-transition {
navigation: auto;
}
@keyframes slide-in {
from {
transform: translate(100vw, 0);
}
to {
transform: translate(0, 0);
}
}
@keyframes slide-out {
from {
transform: translate(0, 0);
}
to {
transform: translate(100vw, 0);
}
}
::view-transition-new(root) {
animation-name: slide-in;
}
::view-transition-old(root) {
animation-name: slide-out;
}
What we've added in this example is the usage of keyframes. The View Transition API introduces new pseudo-elements ::view-transition-old and ::view-transition-new. You can think of it as selecting the current and destination screens. Now you can add CSS animations like for other selectors.
Reasons to Introduce View Transitions
Decrease Cognitive Load
Loading pages with animations might decrease the perceived load time for the end-user.
Makes the page look next-gen
Until View Transition API is relatively new, all implementations will look like something unusall, which might elevate your site to stand out from the competition.
Reasons Against Introducing View Transitions
Nausea
Animating the whole site might not be comfortable for your users. Of course, one can disable animations globally in their browser's preferences, but we can't assume everyone knows about it 😭
Implementing in SPAs
Is just hard (elaborate).
Unsatisfactory Browser Support
As you might have guessed, Internet Explorer doesn't support it. But it's not only this; Firefox also lacks support. The good news is that it appears on Mozilla's radar, so you can check current progress here.
Summary
In my daily work, I avoid using the view transition API. I simply don't find it enriching the user experience based on current standards. You do you if you decide differently.
I'm going to leave you with the only transition-related gif that I could think of - Homer transitioning into a bush (through opacity?).
Resources: