View transitions are animated and seamless transitions between different states
of a web page or application's UI. The
View Transitions 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 Transitions API.
redBus
redBus has always tried to create as much parity between their native and web
experiences as possible. Prior to the View Transitions 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 multiple
view-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 Transitions 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 Transitions 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
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.