PageSwapEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

ThePageSwapEvent event object is made available inside handler functions for thepageswap event.

Thepageswap event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, thePageSwapEvent event object allows you to manipulate the relatedview transition (providing access to the relevantViewTransition object) from the document being navigatedfrom, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination documents.

Constructor

PageSwapEvent(): Creates a newPageSwapEvent object instance.

Instance properties

activationRead only: Contains aNavigationActivation object containing the navigation type and current and destination document history entries for a same-origin navigation. If the navigation has a cross-origin URL anywhere in the redirect chain, it returnsnull.
viewTransitionRead only: Contains aViewTransition object representing the active view transition for the cross-document navigation.

Examples

window.addEventListener("pageswap", async (e) => {  // Only run this if an active view transition exists  if (e.viewTransition) {    const currentUrl = e.activation.from?.url      ? new URL(e.activation.from.url)      : null;    const targetUrl = new URL(e.activation.entry.url);    // Going from profile page to homepage    // ~> The big img and title are the ones!    if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {      // Set view-transition-name values on the elements to animate      document.querySelector(`#detail main h1`).style.viewTransitionName =        "name";      document.querySelector(`#detail main img`).style.viewTransitionName =        "avatar";      // Remove view-transition-names after snapshots have been taken      // Stops naming conflicts resulting from the page state persisting in BFCache      await e.viewTransition.finished;      document.querySelector(`#detail main h1`).style.viewTransitionName =        "none";      document.querySelector(`#detail main img`).style.viewTransitionName =        "none";    }    // Going to profile page    // ~> The clicked items are the ones!    if (isProfilePage(targetUrl)) {      const profile = extractProfileNameFromUrl(targetUrl);      // Set view-transition-name values on the elements to animate      document.querySelector(`#${profile} span`).style.viewTransitionName =        "name";      document.querySelector(`#${profile} img`).style.viewTransitionName =        "avatar";      // Remove view-transition-names after snapshots have been taken      // Stops naming conflicts resulting from the page state persisting in BFCache      await e.viewTransition.finished;      document.querySelector(`#${profile} span`).style.viewTransitionName =        "none";      document.querySelector(`#${profile} img`).style.viewTransitionName =        "none";    }  }});

Note:SeeList of Chrome DevRel team members for the live demo this code is taken from.