A polyfill for the View Transitions API.
The polyfill is available on NPM.
View some demos showing example transitions.
Install the polyfill in your project from NPM:
npm install view-transitions-polyfill
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>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>Build the polyfill to dist:
npm run build
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