View Transitions Mock

Mock support for Same-Document View Transitions in browsers with no support.

Overview

View Transitions Mock is a robust JavaScript implementation of Same-Document View Transitions (including View Transition Types). It is not a polyfill, as it doesn't replicate the pseudo-tree or the animations from View Transitions. Instead, it mocks support for document.startViewTransition, document.activeViewTransition, ViewTransition.transitionRoot and ViewTransitionTypeSet. This allows you to write modern, standard-compliant Same-Document View Transitions code for any browser, including those without support for document.startViewTransition or View Transition Types.

Once registered, stop sprinkling if (document.startViewTransition) guards across your codebase and, instead, safely call the API, handle its promises, and manage View Transition Types as if they were natively supported.

• Without view-transitions-mock:

  document.querySelector('button').addEventListener('click', async () => {
    if (document.startViewTransition && ("types" in ViewTransition?.prototype)) {
      document.querySelector('#thing').style.viewTransitionName = 'the-thing';
      const t = document.startViewTransition({
        update: updateTheDOM,
        types: ['slide', 'from-left']
      });
      await t.finished;
      document.querySelector('#thing').style.viewTransitionName = '';
    } else {
      updateTheDOM();
    }
  });
  

• With view-transitions-mock:

  import { register } from "view-transitions-mock";
  register();
  
  // The code below works in _any_ browser, including those without Same-Document View Transitions or View Transition Types support.
  document.querySelector('button').addEventListener('click', async () => {
    document.querySelector('#thing').style.viewTransitionName = 'the-thing';
    const t = document.startViewTransition({
      update: updateTheDOM,
      types: ['slide', 'from-left']
    });
    await t.finished;
    document.querySelector('#thing').style.viewTransitionName = '';
  });

Installation

npm i view-transitions-mock

Usage

1. Import and register the mock before you make a call to document.startViewTranstion. For example:

   <script type="module">
     import { register } from "view-transitions-mock";
     register();
   </script>

2. Done.

Registration Configuration

By default, the registation of view-transitions-mock checks whether document.startViewTransition and View Transition Types are supported or not. When both are natively supported, it won’t register the mock.

You can tweak the registration by passing an object with the following properties into the register function:

• requireTypes (Boolean, default value: true): Require support for View Transition Types.
• forced (Boolean, default value: false): Force register the mock, regardless of support.

For example, if you are not relying on View Transition Types, call register as follows so that it does not register the mock in Firefox 144–146 (which does not have support for View Transition Types):

import { register } from "view-transitions-mock";
register({ requireTypes: false });

Or if you want to disable native support for Same-Document View Transitions entirely – handy if you want to test how your site looks without View Transitions – call register as follows:

import { register } from "view-transitions-mock";
register({ forced: true });

Demo

A demo can found in the ./demo subfolder. Use the buttons to control the registration/unregistration of the mock. You can try the demo online at https://chrome.dev/view-transitions-mock.

Tests

View Transitions Mock is tested with Playwright. It is tested in the following browsers:

• Chromium 110.0.5481.38 (No native VT support)
• Firefox 142.0.1 (No native VT support)
• Chromium 145.0.7632.6 (Full native VT support)
• Firefox 146.0.1 (Partial native VT support (no View Transition Types))
• WebKit 26.0 (Full native VT support)

License

view-transitions-mock is released under the Apache 2.0 License. See the enclosed LICENSE for details.

Contributing

We'd love to accept your patches and contributions to this project. See the enclosed CONTRIBUTING for details.

Disclaimer

This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.