NavigationActivation

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

TheNavigationActivation interface of theNavigation API represents a recent cross-document navigation. It contains the navigation type and outgoing and inbound document history entries.

This object is accessed via thePageSwapEvent.activation andNavigation.activation properties. Note that, in each case, theNavigationActivation represents a different navigation:

Navigation.activation represents information about the navigation to the current page.
PageSwapEvent.activation represents information about the navigation to the next page.

Instance properties

entryRead onlyExperimental: Contains a NavigationHistoryEntry object representing the history entry for the inbound ("to") document in the navigation. This is equivalent to theNavigation.currentEntry property at the moment the inbound document was activated.
fromRead onlyExperimental: Contains a NavigationHistoryEntry object representing the history entry for the outgoing ("from") document in the navigation.
navigationTypeRead onlyExperimental: Contains a string indicating the type of 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.