PageRevealEvent

Limited availability

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

ThePageRevealEvent event object is made available inside handler functions for thepagereveal event.

During a cross-document navigation, it allows you to manipulate a relatedview transition (providing access to the relevantViewTransition object) from the document being navigatedto, if a view transition was triggered by the navigation.

Outside view transitions, this event is also useful for cases such as triggering a startup animation, or reporting a page view. It's equivalent to the firstWindow.requestAnimationFrame() run after a cross-document navigation, if you were to triggerrequestAnimationFrame() in the<head> of the document. For example, if you ran the followingreveal() function in the<head>:

function reveal() {  // Include startup animation here}/* This will fire in the first rendered frame after loading */requestAnimationFrame(() => reveal());/* This will fire if the page is restored from BFCache */window.onpagehide = () => requestAnimationFrame(() => reveal());

Constructor

PageRevealEvent(): Creates a newPageRevealEvent object instance.

Instance properties

viewTransitionRead only: Contains aViewTransition object representing the active view transition for the cross-document navigation.

Examples

window.addEventListener("pagereveal", async (e) => {  // If the "from" history entry does not exist, return  if (!navigation.activation.from) return;  // Only run this if an active view transition exists  if (e.viewTransition) {    const fromUrl = new URL(navigation.activation.from.url);    const currentUrl = new URL(navigation.activation.entry.url);    // Went from profile page to homepage    // ~> Set VT names on the relevant list item    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {      const profile = extractProfileNameFromUrl(fromUrl);      // 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 names after snapshots have been taken      // so that we're ready for the next navigation      await e.viewTransition.ready;      document.querySelector(`#${profile} span`).style.viewTransitionName =        "none";      document.querySelector(`#${profile} img`).style.viewTransitionName =        "none";    }    // Went to profile page    // ~> Set VT names on the main title and image    if (isProfilePage(currentUrl)) {      // 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 names after snapshots have been taken      // so that we're ready for the next navigation      await e.viewTransition.ready;      document.querySelector(`#detail main h1`).style.viewTransitionName =        "none";      document.querySelector(`#detail main img`).style.viewTransitionName =        "none";    }  }});

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