Bringing Microsoft Internet Explorer’s proprietary “Interpage Transitions” back to Modern Browsers using the View Transition API

~

~

# A Quick Trip Down Memory Lane (and Project History)

If you built websites in the late 1990s or early 2000s, you might remember that Microsoft Internet Explorer 4.0 through 8.0 had a proprietary feature called Interpage Transitions. Using a simple <meta> tag in the <head> of your document, you could apply PowerPoint-style transitions — like Box in, Circle out, Vertical blinds, Checkerboard, or Random dissolve — to the entire browser viewport whenever a visitor entered or exited a web page.

<!-- Page entry effect using effect number 7 (Wipe left) -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=7)">

At the end of 2024, it struck me that we now have all the primitives in modern CSS and the View Transition API to recreate those exact transitions cleanly on today’s web. I teased an early prototype on Bluesky back in December 2024 as a little EOY project, and I even showed it off in a few conference talks since.

However, I never got around to actually covering it here on bram.us because the project wasn’t finalized yet: I had only implemented a handful of the 23 effects and still needed to wire up the trickier ones like checkerboard grids, pixel dissolves, and random bars. Recently, thanks to Gemini, I was able to easily knock out the remaining effects, polish up the interactive demo site, and finally get the whole thing over the finish line! 🙂

~

# Bringing the Oldskool Back

Rather than inventing a new configuration format, ie-page-transitions brings the oldskool back by reading the exact same <meta http-equiv="Page-Enter"> and <meta http-equiv="Page-Exit"> tags that Internet Explorer used back in the day.

Under the hood, a tiny script parses the revealTrans(Duration=…,Transition=…) declaration from your <meta> tags and translates it into Selective View Transitions with Active Types (for example, page-enter-effect-7). The accompanying stylesheet then uses the :active-view-transition-type() pseudo-class to animate the ::view-transition-old(root) and ::view-transition-new(root) pseudo-elements using modern CSS clip-path shapes, multi-layer mask-image gradients, and registered custom properties (@property).

To use it on a Multi-Page Application (aka “just a website”), opt in to Cross-Document View Transitions, load the stylesheet and render-blocking module script, and drop in your classic IE <meta> tags:

<!-- 1. Enable Cross-Document View Transitions -->
<style>
	@view-transition {
		navigation: auto;
	}
</style>

<!-- 2. Include Stylesheet and Render-Blocking Script -->
<link rel="stylesheet" href="https://unpkg.com/ie-page-transitions/ie-page-transitions.css">
<script src="https://unpkg.com/ie-page-transitions/ie-page-transitions.mpa.js" type="module" blocking="render"></script>

<!-- 3. Configure IE Page Transitions Effect(s) -->
<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=0.5,Transition=23)">

A helper for Single-Page Applications (SPAs) is also included, alongside a set of CSS Custom Properties (like --page-transitions-blinds-bands, --page-transitions-checkerboard-columns, and --page-transitions-random-dissolve-size) in case you want to tweak the geometry of the effects.

Under the hood ie-page-transitions uses View Transition Types. Browser support therefore only starts with Chrome 125+, Safari 18.2+, and Firefox 147+ for the SPA variant. For the MPA variant, Cross-Document View Transition support is required, so that leaves Chrome 126+ and Safari 18.2+.

Because ie-page-transitions reuses the original <meta> tags originally introduced by Internet Explorer, the effects are supported not only in today’s modern browsers, but also in Internet Explorer 5.5 – 8.0 😆. In those versions of IE, the browser’s native DirectX RevealTrans filter will kick in automatically while in modern browsers ie-page-transitions takes over.

~

# Check It Out

I’ve put together a dedicated website at page-transitions.style where you can preview all 23 effects, read the full documentation, and play with both the SPA and MPA demos right inside an embedded browser shell.

• page-transitions.style (Website & Live Demos) →
• ie-page-transitions on GitHub →
• ie-page-transitions on NPM →

~

# Spread the word

Feel free to reshare one of the following posts on social media to help spread the word:

• 🦋 Bluesky
• 🦣 Mastodon
• 💼 LinkedIn

~