{"id":28413964,"url":"https://github.com/bramus/ie-page-transitions","last_synced_at":"2025-07-21T08:32:04.458Z","repository":{"id":268625419,"uuid":"752450161","full_name":"bramus/ie-page-transitions","owner":"bramus","description":"Bringing back Internet Explorer’s Page Transitions thanks to the View Transition API","archived":false,"fork":false,"pushed_at":"2025-02-28T10:12:38.000Z","size":99,"stargazers_count":21,"open_issues_count":11,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-17T22:31:48.505Z","etag":null,"topics":["css","javascript","view-transition-api","view-transitions"],"latest_commit_sha":null,"homepage":"https://page-transitions.style","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bramus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"bramus","-custom":["https://www.paypal.me/bramus","https://www.bram.us/"]}},"created_at":"2024-02-03T21:52:44.000Z","updated_at":"2025-06-20T17:59:23.000Z","dependencies_parsed_at":"2024-12-17T23:37:55.427Z","dependency_job_id":null,"html_url":"https://github.com/bramus/ie-page-transitions","commit_stats":null,"previous_names":["bramus/ie-page-transitions"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bramus/ie-page-transitions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fie-page-transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fie-page-transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fie-page-transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fie-page-transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bramus","download_url":"https://codeload.github.com/bramus/ie-page-transitions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fie-page-transitions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266267215,"owners_count":23902315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","javascript","view-transition-api","view-transitions"],"created_at":"2025-06-03T06:10:52.348Z","updated_at":"2025-07-21T08:32:04.452Z","avatar_url":"https://github.com/bramus.png","language":"CSS","funding_links":["https://github.com/sponsors/bramus","https://www.paypal.me/bramus","https://www.bram.us/"],"categories":[],"sub_categories":[],"readme":"# ie-page-transitions\n\nBringing back Internet Explorer’s Page Transitions thanks to the View Transition API\n\n[![Source](https://img.shields.io/badge/Source-GitHub-2dba4e)](https://github.com/bramus/ie-page-transitions)\n[![npm](https://img.shields.io/npm/v/ie-page-transitions)](https://www.npmjs.com/package/ie-page-transitions)\n[![NPM](https://img.shields.io/npm/l/ie-page-transitions)](./LICENSE)\n[![Demo](https://img.shields.io/badge/demo-_Website-hotpink)](https://page-transitions.style/)\n\n## Internet Explorer’s Page Transitions\n\nMicrosoft Internet Explorer 4.0 and above featured a proprietary feature called [Interpage Transitions](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532847(v=vs.85)?redirectedfrom=MSDN#interpage-transitions). It allowed you to specify [a transition effect](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532853(v=vs.85)#transitions) to apply to the entire window as a Web page was loaded or exited.\n\nThe feature worked best as of Microsoft Internet Explorer 5.5 which had a richer variety of optimized filters. The feature was eventually deprecated with the release of Windows Internet Explorer 9.\n\nTransitions were specified using a meta tag in the `\u003chead\u003e` of a web page. For example, the following snippet caused the [`Blinds` transition](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532976(v=vs.85)) to play when the user loaded the page and caused a [`Slide` transition](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms533087(v=vs.85)) to play when the user exited the page.\n\n```html\n\u003cmeta http-equiv=\"Page-Enter\" content=\"progid:DXImageTransform.Microsoft.Blinds(Duration=4)\" /\u003e\n\u003cmeta http-equiv=\"Page-Exit\" content=\"progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')\" /\u003e\n```\n\nFour events could create instances of interpage transitions: `Page-Enter`, `Page-Exit`, `Site-Enter`, and `Site-Exit`.\n\n### The `RevealTrans` Filter\n\nThe Page Transitions feature also came with a shorthand [the `DXImageTransform.Microsoft.RevealTrans` Filter](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms533085(v=vs.85)), which offered 23 predefined transitions mirrored from the effects found in Microsoft PowerPoint.\n\nUsing one of these predefined effects was as easy as referring to its number – ranging from 0 to 22 – in the `revealTrans`’s filter `Transition` property. Using the value `23` randomly selected one of the 23 available effects.\n\nFor example, using the following snippet caused Transition Effect number `7` – a vertical wipe from right to left – to play when the page was loaded.\n\n```html\n\u003cmeta http-equiv=\"Page-Enter\" content=\"revealTrans(Duration=0.5,Transition=7)\"\u003e\n```\n\nUnder the hood the `revealTrans(Transition=7)` mapped to a `DXImageTransform.Microsoft.Blinds(direction='left', bands=1)` effect.\n\n## Requirements\n\nFor Page Transitions to run, a browser with built-in Page Transitions support or a browser with support for the View Transition API + [Selective View Transitions with Active Types](https://drafts.csswg.org/css-view-transitions-2/#selective-vt) is required.\n\n- SPA\n  - Chrome 125+\n  - Safari 18.2\n\n- MPA\n  - IE 5.5 - 8.0 _(built-in)_\n  - Chrome 126+\n  - Safari 18.2 _(buggy)_\n\nIn browsers with no support for View Transitions, no effects will be run. The presence of `ie-page-transitions.css` won’t affect these browsers.\n\n## Installation\n\nYou can install this package from NPM:\n\n```\nnpm install ie-page-transitions\n```\n\nOr, alternatively, load the files directly from a CDN:\n\n- unpkg: `https://unpkg.com/ie-page-transitions/` + `path/to/file.ext`\n- JSDelivr: `https://cdn.jsdelivr.net/npm/ie-page-transitions/` + `path/to/file.ext`\n- SkyPack: `https://cdn.skypack.dev/ie-page-transitions/` + `path/to/file.ext`\n- ESM.sh: `https://esm.sh/ie-page-transitions/` + `path/to/file.ext`\n\n## Usage\n\n### MPA\n\n1. Enable Cross-Document View Transitions between two same-origin pages\n\n    ```html\n    \u003cstyle\u003e\n        @view-transition {\n            navigation: auto;\n        }\n    \u003c/style\u003e\n    ```\n\n2. Include `ie-page-transitions.css` and `ie-page-transitions.mpa.js` on your pages.\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/ie-page-transitions/src/ie-page-transitions.css\"\u003e\n    \u003cscript src=\"https://unpkg.com/ie-page-transitions/src/ie-page-transitions.mpa.js\" type=\"module\" blocking=\"render\"\u003e\u003c/script\u003e\n    ```\n\n    *Note: The script **must** be loaded as a module and **must** be set to block rendering.*\n\n3. Populate your pages with the meta tag(s) to define which effect(s) you want. _(See [Effect Configuration](#effect-configuration))_\n\n    ```html\n    \u003cmeta http-equiv=\"Page-Enter\" content=\"revealTrans(Duration=0.5,Transition=23)\"\u003e\n    \u003cmeta http-equiv=\"Page-Exit\" content=\"revealTrans(Duration=0.5,Transition=23)\"\u003e\n    ```\n\n### SPA\n\n1. Include `ie-page-transitions.css`\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/ie-page-transitions/src/ie-page-transitions.css\"\u003e\n    ```\n\n2. Inject the meta tags to define which effect you want. _(See [Effect Configuration](#effect-configuration))_\n\n3. If you have an entry effect on the first load, add the following render-blocking script to your page:\n\n    ```html\n    \u003cscript type=\"module\" blocking=\"render\"\u003e\n        import { init } from 'https://unpkg.com/ie-page-transitions/src/ie-page-transitions.spa.js';\n        init();\n    \u003c/script\u003e\n    ```\n\n    *Note: There is no real harm in adding this code when you don’t have an entry effect.*\n\n4. Instead of calling `document.startViewTransition(callback)` call `PageTransitions.startViewTransition(callback)`.\n\n    ```js\n    import { startViewTransition } from 'https://unpkg.com/ie-page-transitions/src/ie-page-transitions.spa.js';\n\n    // Randomize page layout (wrapped in a startViewTransition)\n    $linkToNextPage.addEventListener('click', (e) =\u003e {\n        e.preventDefault();\n        startViewTransition(updateTheDOMSomehow);\n    });\n    ```\n\n## Effect Configuration\n\nJust like IE, the transition can be configured by setting the proper values in the meta tag:\n\n- Set `http-equiv` to either `Page-Enter` or `Page-Exit` to define whether this is a page entry or page exit animation\n- Set the `Duration` to any number (double) to define the duration in seconds for the effect, eg. `2.0`\n  - The duration values are limited to `0.5`, `1.0`, `1.5`, and `2.0`\n- Set the `Transition` to a number (int) to define which transition effect to use. There are 23 effects, from `0` to `22`. Using the value `23` randomly selects one of the 23 available effects.\n\nFor example, to perform a pixel fade (aka. random dissolve) transition for 2 seconds upon entering a page, this markup is needed:\n\n```html\n\u003cmeta http-equiv=\"Page-Enter\" content=\"revealTrans(Duration=2.0,Transition=12)\"\u003e\n```\n\n## The Effects\n\n@TODO: Video\n\n| Status | Number | Name                   | Description                                                            | DXImageTransform                                                        |\n|--------|--------|------------------------|------------------------------------------------------------------------|-------------------------------------------------------------------------|\n| ✅      | 0      | Box in                 | Rectangle towards centre                                               | DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='in')        |\n| ✅      | 1      | Box out                | Rectangle from centre outwards                                         | DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='out')       |\n| ✅      | 2      | Circle in              | Circle towards centre                                                  | DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='in')        |\n| ✅      | 3      | Circle out             | Circle from centre outwards                                            | DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='out')       |\n| ✅      | 4      | Wipe up                | Horizontal wipe from bottom to top                                     | DXImageTransform.Microsoft.Blinds(direction='up', bands=1)              |\n| ✅      | 5      | Wipe down              | Horizontal wipe from top to bottom                                     | DXImageTransform.Microsoft.Blinds(direction='down', bands=1)            |\n| ✅      | 6      | Wipe right             | Vertical wipe from left to right                                       | DXImageTransform.Microsoft.Blinds(direction='right', bands=1)           |\n| ✅      | 7      | Wipe left              | Vertical wipe from right to left                                       | DXImageTransform.Microsoft.Blinds(direction='left', bands=1)            |\n| ✅      | 8      | Vertical blinds        | Vertical Blinds from left to right                                     | DXImageTransform.Microsoft.Blinds(direction='right')                    |\n| ✅      | 9      | Horizontal blinds      | Horizontal blinds from top to bottom                                   | DXImageTransform.Microsoft.Blinds(direction='down')                     |\n| ❌      | 10     | Checkerboard across    | Box Blinds from left to right                                          | DXImageTransform.Microsoft.CheckerBoard(direction='right')              |\n| ❌      | 11     | Checkerboard down      | Box Blinds from top to bottom                                          | DXImageTransform.Microsoft.CheckerBoard(direction='down')               |\n| ❌      | 12     | Random dissolve        | Pixel Fade                                                             | DXImageTransform.Microsoft.RandomDissolve                               |\n| ✅      | 13     | Split vertical in      | Vertical Window Opening from middle to sides                           | DXImageTransform.Microsoft.Barn(orientation='vertical', motion='in')    |\n| ✅      | 14     | Split vertical out     | Vertical Window Closing from sides to middle                           | DXImageTransform.Microsoft.Barn(orientation='vertical', motion='out')   |\n| ❌      | 15     | Split horizontal in    | Horizontal Window Opening from middle to top/bottom                    | DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='in')  |\n| ❌      | 16     | Split horizontal out   | Horizontal Window Closing from top/bottom to middle                    | DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='out') |\n| ✅      | 17     | Strips left down       | New content is revealed from the upper left corner to the lower right. | DXImageTransform.Microsoft.Strips(motion='leftdown')                    |\n| ✅      | 18     | Strips left up         | New content is revealed from the lower left corner to the upper right. | DXImageTransform.Microsoft.Strips(motion='leftup')                      |\n| ✅      | 19     | Strips right down      | New content is revealed from the upper right corner to the lower left. | DXImageTransform.Microsoft.Strips(motion='rightdown')                   |\n| ✅      | 20     | Strips right up        | New content is revealed from the lower right corner to the upper left. | DXImageTransform.Microsoft.Strips(motion='rightup')                     |\n| ❌      | 21     | Random bars horizontal | Vertical Line Fade                                                     | DXImageTransform.Microsoft.RandomBars(orientation='horizontal')         |\n| ❌      | 22     | Random bars vertical   | Horizontal Line Fade                                                   | DXImageTransform.Microsoft.RandomBars(orientation='vertical')           |\n| ✅      | 23     | Random                 | Random                                                                 |                                                                         |\n\n## Differences\n\nIn Internet Explorer it was not possible to have one page define an exit transition and the other page an entry transition. When having both an exit and entry effect, the two would conflict, resulting in no transition happening at all.\n\nThis library does not have the limitation. When both an exit and entry effect are set, these will run sequentially.\n\nTo control the `background-color` of the `::view-transition` backdrop in between the exit and entry effects, set the `--page-transitions-backdrop-color` custom property on the `:root` element. If no color is set, the color `transparent` will be used.\n\n## References\n\n- https://www.simplehtmlguide.com/pagetransitions.php\n- https://web.archive.org/web/20111111015459/https://standardista.com/html5/http-equiv-the-meta-attribute-explained/\n- https://force4u.cocolog-nifty.com/skywalker/ie/index.html\n- https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532942(v=vs.85)\n- https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms533085(v=vs.85)\n- http://www.influentialcomputers.com/meta-reveal-demo.asp\n- Checkerboard: https://codepen.io/t_afif/pen/ZEZyemJ?editors=0110 \n- http://www.csgnetwork.com/pagetransitiongen.html\n\n## Try it out in an actual IE8\n\n- Start the local dev server\n\n    ```\n    npm run start\n    ```\n\n- Expose the dev server to the public over HTTP, for example using [bore](http://bore.pub)\n\n    ```\n    brew install bore-cli\n    bore local 3000 --to bore.pub\n    ```\n\n- Visit the exposed dev server in IE, using something like BrowserLing or https://copy.sh/v86/\n\n## License\n\nSee enclosed [LICENSE](./LICENSE)\n\n## Disclaimer\n\n This is not an officially supported Google product.\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramus%2Fie-page-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbramus%2Fie-page-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramus%2Fie-page-transitions/lists"}