ie-page-transitions

v0.0.1-alpha.2

Published

4 days ago

Bringing back Internet Explorer’s Page Transitions thanks to the View Transition API

Downloads

183

0High
0Medium
0Low

bramus

ie-page-transitions

Bringing back Internet Explorer’s Page Transitions thanks to the View Transition API

Internet Explorer’s Page Transitions

Microsoft Internet Explorer 4.0 and above featured a proprietary feature called Interpage Transitions. It allowed you to specify a transition effect to apply to the entire window as a Web page was loaded or exited.

The 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.

Transitions were specified using a meta tag in the <head> of a web page. For example, the following snippet caused the Blinds transition to play when the user loaded the page and caused a Slide transition to play when the user exited the page.

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=4)" />
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')" />

Four events could create instances of interpage transitions: Page-Enter, Page-Exit, Site-Enter, and Site-Exit.

The `RevealTrans` Filter

The Page Transitions feature also came with a shorthand the DXImageTransform.Microsoft.RevealTrans Filter, which offered 23 predefined transitions mirrored from the effects found in Microsoft PowerPoint.

Using 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.

For example, using the following snippet caused Transition Effect number 7 – a vertical wipe from right to left – to play when the page was loaded.

<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=7)">

Under the hood the revealTrans(Transition=7) mapped to a DXImageTransform.Microsoft.Blinds(direction='left', bands=1) effect.

Requirements

For 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 is required.

SPA
- Chrome 125+
- Safari 18.2
MPA
- IE 5.5 - 8.0 (built-in)
- Chrome 126+
- Safari 18.2 (buggy)

In browsers with no support for View Transitions, no effects will be run. The presence of ie-page-transitions.css won’t affect these browsers.

Usage

MPA

Enable Cross-Document View Transitions between two same-origin pages

<style>
    @view-transition {
        navigation: auto;
    }
</style>

Include ie-page-transitions.css and ie-page-transitions.mpa.js on your pages.

<link rel="stylesheet" href="/dist/ie-page-transitions.css">
<script src="/dist/ie-page-transitions.mpa.js" type="module" blocking="render"></script>

Note: The script must be loaded as a module and must be set to block rendering.

Populate your pages with the meta tag(s) to define which effect(s) you want. (See Effect Configuration)

<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=0.5,Transition=23)">

SPA

Include ie-page-transitions.css

<link rel="stylesheet" href="/dist/ie-page-transitions.css">

Inject the meta tags to define which effect you want. (See Effect Configuration)
If you have an entry effect on the first load, add the following render-blocking script to your page:
```
<script type="module" blocking="render">
    import { init } from '/dist/ie-page-transitions.spa.js';
    init();
</script>
```
Note: There is no real harm in adding this code when you don’t have an entry effect.

Instead of calling document.startViewTransition(callback) call PageTransitions.startViewTransition(callback).

import { startViewTransition } from '/dist/ie-page-transitions.spa.js';

// Randomize page layout (wrapped in a startViewTransition)
$linkToNextPage.addEventListener('click', (e) => {
    e.preventDefault();
    startViewTransition(updateTheDOMSomehow);
});

Effect Configuration

Just like IE, the transition can be configured by setting the proper values in the meta tag:

Set http-equiv to either Page-Enter or Page-Exit to define whether this is a page entry or page exit animation
Set the Duration to any number (double) to define the duration in seconds for the effect, eg. 2.0
- The duration values are limited to 0.5, 1.0, 1.5, and 2.0
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.

For example, to perform a pixel fade (aka. random dissolve) transition for 2 seconds upon entering a page, this markup is needed:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)">

The Effects

@TODO: Video

| Status | Number | Name |--------|--------|------------------ | ✅ | 0 | Box in | ✅ | 1 | Box out | ✅ | 2 | Circle in | ✅ | 3 | Circle out | ✅ | 4 | Wipe up | ✅ | 5 | Wipe down | ✅ | 6 | Wipe right | ✅ | 7 | Wipe left | ✅ | 8 | Vertical blinds | ✅ | 9 | Horizontal blinds | ❌ | 10 | Checkerboard across | ❌ | 11 | Checkerboard down | ❌ | 12 | Random dissolve | ✅ | 13 | Split vertical in | ✅ | 14 | Split vertical out | ❌ | 15 | Split horizontal in | ❌ | 16 | Split horizontal out | ✅ | 17 | Strips left down | ✅ | 18 | Strips left up | ✅ | 19 | Strips right down | ✅ | 20 | Strips right up | ❌ | 21 | Random | ❌ | 22 | Random bars vertical | ✅ | 23 | Random | Description | DXImageTransform | ------|------------------------------------------------------------------------|-------------------------------------------------------------------------| | Rectangle towards centre | DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='in') | | Rectangle from centre outwards | DXImageTransform.Microsoft.Iris(irisstyle='SQUARE', motion='out') | | Circle towards centre | DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='in') | | Circle from centre outwards | DXImageTransform.Microsoft.Iris(irisstyle='CIRCLE', motion='out') | | Horizontal wipe from bottom to top | DXImageTransform.Microsoft.Blinds(direction='up', bands=1) | | Horizontal wipe from top to bottom | DXImageTransform.Microsoft.Blinds(direction='down', bands=1) | | Vertical wipe from left to right | DXImageTransform.Microsoft.Blinds(direction='right', bands=1) | | Vertical wipe from right to left | DXImageTransform.Microsoft.Blinds(direction='left', bands=1) | | Vertical Blinds from left to right | DXImageTransform.Microsoft.Blinds(direction='right') | | Horizontal blinds from top to bottom | DXImageTransform.Microsoft.Blinds(direction='down') | | Box Blinds from left to right | DXImageTransform.Microsoft.CheckerBoard(direction='right') | | Box Blinds from top to bottom | DXImageTransform.Microsoft.CheckerBoard(direction='down') | | Pixel Fade | DXImageTransform.Microsoft.RandomDissolve | | Vertical Window Opening from middle to sides | DXImageTransform.Microsoft.Barn(orientation='vertical', motion='in') | | Vertical Window Closing from sides to middle | DXImageTransform.Microsoft.Barn(orientation='vertical', motion='out') | | Horizontal Window Opening from middle to top/bottom | DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='in') | | Horizontal Window Closing from top/bottom to middle | DXImageTransform.Microsoft.Barn(orientation='horizontal', motion='out') | | New content is revealed from the upper left corner to the lower right. | DXImageTransform.Microsoft.Strips(motion='leftdown') | | New content is revealed from the lower left corner to the upper right. | DXImageTransform.Microsoft.Strips(motion='leftup') | | New content is revealed from the upper right corner to the lower left. | DXImageTransform.Microsoft.Strips(motion='rightdown') | | New content is revealed from the lower right corner to the upper left. | DXImageTransform.Microsoft.Strips(motion='rightup') | bars horizontal | Vertical Line Fade | DXImageTransform.Microsoft.RandomBars(orientation='horizontal') | | Horizontal Line Fade | DXImageTransform.Microsoft.RandomBars(orientation='vertical') | | Random | |

Differences

In 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.

This library does not have the limitation. When both an exit and entry effect are set, these will run sequentially.

References

https://www.simplehtmlguide.com/pagetransitions.php
https://web.archive.org/web/20111111015459/https://standardista.com/html5/http-equiv-the-meta-attribute-explained/
https://force4u.cocolog-nifty.com/skywalker/ie/index.html
https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532942(v=vs.85)
https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms533085(v=vs.85)
http://www.influentialcomputers.com/meta-reveal-demo.asp
Checkerboard: https://codepen.io/t_afif/pen/ZEZyemJ?editors=0110
http://www.csgnetwork.com/pagetransitiongen.html

Try it out in an actual IE8

Start the local dev server
```
npm run start
```
Expose the dev server to the public over HTTP, for example using bore
```
brew install bore-cli
bore local 3000 --to bore.pub
```
Visit the exposed dev server in IE, using something like BrowserLing or https://copy.sh/v86/

License

See enclosed LICENSE

Disclaimer

This is not an officially supported Google product.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ie-page-transitions

Internet Explorer’s Page Transitions

The RevealTrans Filter

Requirements

Usage

MPA

SPA

Effect Configuration

The Effects

Differences

References

Try it out in an actual IE8

License

Disclaimer

The `RevealTrans` Filter