Setting up the Router

Open again services/Router.js. Replace the code after the switch in the go method:

if (pageElement) {
    function changePage() {
        // get current page element            
        let currentPage = document.querySelector("main").firstElementChild; 
        if (currentPage) {                
            currentPage.remove();
            document.querySelector("main").appendChild(pageElement);
        } else {
            document.querySelector("main").appendChild(pageElement);
        }
    }
    // Progressive Enhancement
    if (!document.startViewTransition) {
        changePage();                
    } else {
        document.startViewTransition(() => changePage());
    }
}

window.scrollX = 0;

Now try changing the route again and see the cross fade animation happening.

Customize the timings

Open styles.css and add the following code:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
}

Customize the animation

Add the following styles:

@keyframes fade-in {
    from { opacity: 0; }
  }
  
  @keyframes fade-out {
    to { opacity: 0; }
  }
  
  @keyframes slide-from-right {
    from { transform: translateX(60px); }
  }
  
  @keyframes slide-to-left {
    to { transform: translateX(-60px); }
  }
  
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }
  
  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }

Keep the header out of the transition

Add the following code:

 body>header {
    view-transition-name: main-header;    
}