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="https://github.com/demarketed/view-transitions-polyfill/raw/main/view-transitions-polyfill"></script>

Compatibility

According to data from Can I use, the polyfill should be fully supported on:

• Chrome ≥ 88
• Edge ≥ 88
• Opera ≥ 74
• Safari ≥ 14
• Firefox ≥ 78

This is because the polyfill currently requires the browser to support these notable features:

• Element.animate()
• Document.getAnimations()
• requestAnimationFrame()
• Custom elements
• Shadow DOM
• CSS :where() selector

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