View Transitions API polyfill

A polyfill for the View Transitions API.

The polyfill is available on NPM.

Demo

View some demos showing example transitions.

Installation

Install the polyfill in your project from NPM:

npm install view-transitions-polyfill

Usage

Import the module into your site.

Inside a script:

import 'view-transitions-polyfill';

Or from the HTML:

<script type="module">
  import 'view-transitions-polyfill';
</script>

With Astro View Transitions

You can use the polyfill with Astro view transitions by importing the script in the document as you would normally. For example, within a component:

<script src="view-transitions-polyfill"></script>

Development

Building

Build the polyfill to dist:

npm run build

Testing

To test the polyfill, you can run Web Platform Tests. You need to set up your system before running tests.

Run the tests with:

npm run test

This will generate report files in test/report.

The polyfill only loads its functions into the browser if it does not already natively support the View Transitions API. You can run the tests with a version of the polyfill that avoids this check with:

npm run test-always-polyfill

You can view the tests' web pages in your browser with:

npm run test-debug