View transitions case studies

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Browser Support

  • 111
  • 111
  • x
  • x

Source

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.

Fade and slide in view transitions when the user clicks the login icon on the redBus home page.

Code

This implementation uses multipleview-transition-nameand custom animations (scale-downand scale-up). Using view-transition-namewith 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-groupin 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.

View transitions animation on the "Why buy from Policybazaar" CTA on an investment listing page.

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.