1. Web
  2. Web APIs
  3. PageRevealEvent

PageRevealEvent

Limited availability

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

The PageRevealEvent event object is made available inside handler functions for the pagereveal event.

During a cross-document navigation, it allows you to manipulate a related view transition (providing access to the relevant ViewTransition object) from the document being navigated to, 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 first Window.requestAnimationFrame() run after a cross-document navigation, if you were to trigger requestAnimationFrame() in the <head> of the document. For example, if you ran the following reveal() function in the <head>:

js
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 new PageRevealEvent object instance.

Instance properties

viewTransition Read only

Contains a ViewTransition object representing the active view transition for the cross-document navigation.

Examples

js
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: See List of Chrome DevRel team members for the live demo this code is taken from.

Specifications

Specification
HTML
# the-pagerevealevent-interface

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content