View transitions are animated and seamless transitions between different states of a web page or application's UI. The View Transition API has been designed to let you create these effects in a more straightforward and performant way than has been possible before. The API offers multiple benefits over previous JavaScript approaches including:
- Improved user experience: Smooth transitions and visual cues guide users through changes in UI, making navigation feel natural and less jarring.
- Visual continuity: Maintaining a sense of continuity between views reduces cognitive load and helps users stay oriented within the application.
- Performance: The API tries to use as few main thread resources as possible which creates smoother animations.
- Modern aesthetic: The improved transitions contribute to a polished and engaging user experience.
This post is part of a series discussing how ecommerce companies enhanced their website using new CSS and UI features. In this article, discover how some companies implemented and benefited from the View Transition API.
redBus
redBus has always tried to create as much parity between their native and web experiences as possible. Prior to the View Transition API, implementing these animations on our web assets was challenging. But with the API, we have found it intuitive to create transitions across multiple user journeys to make the web experience more app-like. All this coupled with performance benefits makes it a must have feature for all websites.—Amit Kumar, Senior Engineering Manager, redBus.
The team has implemented view transitions in multiple places. Here's an example of a combination of fade in and slide in animation on the login icon on the home page.
Code
This implementation uses multipleview-transition-name
and custom animations
(scale-down
and scale-up
). Using view-transition-name
with a unique value
separates the sign in component from the rest of the page to animate it
separately. Creating a new unique view-transition-name
also creates a new
::view-transition-group
in the pseudo-element tree (shown in the following
code), allowing it to be manipulated separately from the default
::view-transition-group(root)
.
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
The team used view transitions to add a fading animation when the user switches between product thumbnails.
The implementation is so easy, by using
startViewTransition
we immediately get a more pleasant fading transition compared to the previous implementation without any effects—Andy Wihalim, Senior Software Engineer, Tokopedia.
Before
After
Code
The following code uses a React framework and includes framework-specific code,
such as flushSync.
Read more about working with frameworks to implement view
transitions.
This is a basic implementation which checks if the browser supports
startViewTransition
and if so, does the transition. Otherwise, it falls back
to default behavior.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
Policybazaar
Policybazaar's investment vertical has used the View Transition API on help tip elements like "why buy", making them visually appealing and improving usage of such features.
By incorporating View Transitions, we eliminated repetitive CSS and JavaScript code responsible for managing animations across various states. This saved development effort and significantly enhanced the user experience.—Aman Soni, Tech Lead, Policybazaar.
Code
The following code is similar to the previous examples. One thing to note is the
ability to override the default styles and animations of
::view-transition-old(root)
and::view-transition-new(root)
. In this case,
the default animation-duration
was updated to 0.4s.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
Things to consider when using the View Transition API
When using multiple view transition effects on the same page, ensure that you have a different view-transition-name for each effect or section to prevent conflicts.
While a view transition is active (transitioning), it will add a new layer on
top of the rest of the UI. So, avoid triggering the transition on hover, because
the mouseLeave
event will be triggered unexpectedly (when the actual cursor is
still not moving yet).
Resources
- Smooth and simple transitions with the View Transition API
- Explainer: View Transitions for MPA
- Case Study: Seamless navigation made possible with View Transitions
- Case Study: The Web Can Do What!? | Deliver app-like navigations
- Interop Proposal: Make View Transitions available across browsers
- Do you want to report a bug or request a new feature? We want to hear from you for SPA and MPA.
Explore the other articles in this series that talk about how ecommerce
companies benefited from using new CSS and UI features such as Scroll-driven
animations, popover, container queries and the has()
selector.