PageSwapEvent

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The PageSwapEvent event object is made available inside handler functions for the pageswap event.

The pageswap event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the PageSwapEvent event object allows you to manipulate the related view transition (providing access to the relevant ViewTransition object) from the document being navigated from, 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() Experimental: Creates a new PageSwapEvent object instance.

Instance properties

activation Read only Experimental: Contains a NavigationActivation 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 returns null.
viewTransition Read only Experimental: Contains a ViewTransition 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: See List of Chrome DevRel team members for the live demo this code is taken from.

Specifications

Specification
HTML Standard # the-pageswapevent-interface

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`PageSwapEvent`	128	No	No	No	No	128	No	No	No	No	128
`PageSwapEvent`	124	124	No	110	No	124	No	82	No	No	124
`activation`	124	124	No	110	No	124	No	82	No	No	124
`viewTransition`	126	126	No	112	No	126	No	83	No	No	126

Constructor

Instance properties

Examples

Specifications

Browser compatibility

See also