Add Retro Page Transitions

Build and deploy a multi-page site with selectable retro page transitions.

Introduction

30 Second Summary

Most websites replace one page with the next in a blink. That sudden jump leaves no sense of motion or personality.

In this project, you will build a three-page static site that uses the View Transition API through ie-page-transitions. Visitors can choose a retro effect that plays during the next page change.

What You'll Build

Picture clicking between three pages while your chosen retro effect carries one screen into the next.

By the end of this project, you'll have:

A three-page demo where every menu click turns a plain page change into a visible transition.
A transition picker that makes your next page change use the selected retro effect.
A public website that lets you show the transitions working from a shareable URL.
An optional Secret Mission to push your skills further.

Are there any prerequisites?

You need a text editor plus a browser that supports cross-document view transitions.

You also need an account with a free static host for the deployment step.

Before We Start

Retro page effects depend on a browser that can animate navigation between separate pages. The View Transition API provides that browser capability.

This preparation gives you a code editor for building the site. It also gives you a supported browser for seeing each transition.

In this step, get ready to:

Make Visual Studio Code available for editing the site.
Confirm Google Chrome supports cross-document View Transitions.
Create an empty retro-page-transitions folder on your Desktop.

Confirm your code editor

A code editor keeps the website files together while giving you tools for writing HTML, CSS, and JavaScript. You will use Visual Studio Code throughout this project.

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type Visual Studio Code into the search field.
Press Enter to open the matching result.

✔️ Visual Studio Code opens

Visual Studio Code is ready when you can see its editor window. Keep the editor open for the folder you create shortly.

ⓧ Visual Studio Code is missing

Install Visual Studio Code from its official download page. Choose the instructions for your operating system.

macOS

Visit the Visual Studio Code download page.
Download the macOS .dmg file for your Mac.
Open the downloaded .dmg file.
Drag Visual Studio Code.app into the Applications folder.
Open Visual Studio Code from system search.

Windows

Windows may request permission to install the editor. The permission applies to this local application installation.

Visit the Visual Studio Code download page.
Download the User Installer for Windows.
Open the downloaded .exe file.
Follow the installer prompts.
Open Visual Studio Code from system search.

Check your browser support

Cross-document transitions need browser support for navigation between separate pages. Google Chrome supports this feature from version 126.

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type Google Chrome into the search field.
Press Enter to open the matching result.
Select the More menu in the top-right corner.
Select Help.
Select About Google Chrome.
Read the version number beneath the Google Chrome heading.

✔️ I see version 126 or higher

Your browser can run the cross-document transitions used in this project. Leave Google Chrome available for testing the site.

ⓧ I see an older version

An older browser can load the pages without showing the expected transitions. Updating closes that gap before you start testing.

Wait for Google Chrome to check for an update.
Select Relaunch if that button appears.
Return to About Google Chrome.
Confirm that the version is now 126 or higher.

ⓧ Google Chrome is missing

Install Google Chrome from its official download page. Choose the instructions for your operating system.

macOS

Your Mac may request its administrator password. This authorizes only the local installation.

Visit the Google Chrome download page.
Download the installation file.
Open googlechrome.dmg.
Drag Chrome into the Applications folder.
Open Google Chrome from system search.
Check the version from About Google Chrome.

Windows

Windows may request permission before the installer runs. The permission applies to this local browser installation.

Visit the Google Chrome download page.
Download the installation file.
Open the downloaded installer.
Select Run if Windows asks whether to run the file.
Select Yes if Windows asks whether to allow changes.
Follow the installer instructions.
Check the version from About Google Chrome.

Still Unable to Open a Tool?

Check that your operating system meets the requirements shown on each official download page. A managed computer may require help from its administrator.

Ask for help with installing Visual Studio Code or Google Chrome.

Create your project folder

The project folder gives every page one shared home. Starting with an empty folder also makes each new file easy to spot.

macOS

Click an empty area of your Desktop.
Select File from the menu bar.
Select New Folder.
Type retro-page-transitions as the folder name.
Press Return.

You should see an empty retro-page-transitions folder on your Desktop.

Windows

Press Windows+E to open File Explorer.
Select Desktop in the left navigation pane.
Select New from the toolbar.
Select Folder.
Type retro-page-transitions as the folder name.
Press Enter.

You should see an empty retro-page-transitions folder inside your Desktop location.

Good progress. Your empty project folder now has a fixed location for every page you build.

Understand how you will test

Why Does the Test Environment Matter?

Cross-document View Transitions run between pages that share the same origin. The origin includes the page scheme, host, and port.

A local web server gives the three pages one dependable origin during development. A deployed URL provides the same structure when you publish the site.

Opening HTML files directly from the filesystem can produce unreliable transition tests. You will test through a web server or deployed URL once the pages exist.

Before the final check, do you expect the new project folder to contain any website files?

Return to the retro-page-transitions folder on your Desktop.
Confirm that the folder is empty.
Switch back to Visual Studio Code.
Switch back to Google Chrome.

You should see an empty project folder alongside a working editor and browser. That is the exact starting point for your three-page site.

Your tools and empty project folder are ready. Next up, you will create three linked HTML pages and watch them switch without animation.

Create the Three-Page Site

A multi-page site needs separate HTML documents. Those documents give each navigation click a real destination.

A local static server gives the browser a reliable way to load those pages. This step establishes a normal hard page swap with no animation.

In this step, get ready to:

Build three plain HTML documents for the site.
Give every page the same three navigation links.
Verify that navigation uses a normal hard page swap.

Create the home page

The Home page introduces the site. Its navigation also establishes the link structure that every page follows.

Return to your code editor from earlier.
Select the retro-page-transitions folder in the code editor's file sidebar.
Create index.html inside the retro-page-transitions folder using the sidebar's new-file control.
Add the Home page markup to index.html by copying this code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home | Retro Page Transitions</title>
</head>
<body>
  <!-- Keep this navigation identical across all three pages -->
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <!-- Give the page a clear identity during navigation tests -->
  <main>
    <h1>Home</h1>
    <p>Welcome to the retro page transitions demo.</p>
  </main>
</body>
</html>

What Does This Page Establish?

The <nav> element points to the three documents in the same folder.
Relative filenames keep each link working through the local preview.
The <main> element gives the Home page a heading you can recognise during testing.

Save index.html.
Start a local static server for retro-page-transitions using your code editor's browser preview feature.
Return to your modern browser from earlier.
Confirm that you can see the Home heading.
Confirm that the navigation shows Home, About, and Contact.

Good start. Your Home page is now being served as the first document in the site.

Home Page Not Appearing?

Confirm that the preview is serving the retro-page-transitions folder.
Confirm that index.html is saved at the top level of that folder.

Ask for help with the preview setup:

Build the linked pages

The About page uses the same navigation as the Home page. Its unique heading makes the document change visible when you follow the link.

Return to your code editor.
Create about.html inside the retro-page-transitions folder using the sidebar's new-file control.
Add the About page markup to about.html by copying this code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About | Retro Page Transitions</title>
</head>
<body>
  <!-- Keep this navigation identical across all three pages -->
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <!-- Give the page a clear identity during navigation tests -->
  <main>
    <h1>About</h1>
    <p>Learn more about this retro navigation experiment.</p>
  </main>
</body>
</html>

What Does This Page Add?

The navigation matches the Home page character for character.
The About heading gives this document a distinct identity.
Matching links make the About page a complete starting point for navigation.

Save about.html.
Return to your browser.
Select About in the navigation.

You should see the About heading. The same three navigation links should remain at the top of the page.

About Link Not Loading?

Confirm that the filename is exactly about.html.
Confirm that the About link uses href="about.html".

Ask for help checking the About link:

The Contact page completes the navigation loop. Every page can now point to every other page.

Return to your code editor.
Create contact.html inside the retro-page-transitions folder using the sidebar's new-file control.
Add the Contact page markup to contact.html by copying this code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact | Retro Page Transitions</title>
</head>
<body>
  <!-- Keep this navigation identical across all three pages -->
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <!-- Give the page a clear identity during navigation tests -->
  <main>
    <h1>Contact</h1>
    <p>Get in touch about this retro page transitions demo.</p>
  </main>
</body>
</html>

What Does This Page Complete?

The Contact page repeats the same three relative links.
The Contact heading makes the final document easy to identify.
The three documents now form a complete navigation loop.

Save contact.html.
Return to your browser.
Select Contact in the navigation.

You should see the Contact heading. The Home plus About links should still be available.

That completes the site structure. All three documents are now connected through the same navigation.

Contact Page Missing?

Confirm that contact.html sits beside index.html.
Confirm that the Contact link uses href="contact.html".

Ask for help checking the Contact page:

✔️ Awesome, I've got everything!

All three pages now share the same navigation.

Save every HTML file before the final navigation test.

ⓧ I'd like to double check the full code

Each file should match the corresponding reference below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home | Retro Page Transitions</title>
</head>
<body>
  <!-- Keep this navigation identical across all three pages -->
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <!-- Give the page a clear identity during navigation tests -->
  <main>
    <h1>Home</h1>
    <p>Welcome to the retro page transitions demo.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About | Retro Page Transitions</title>
</head>
<body>
  <!-- Keep this navigation identical across all three pages -->
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <!-- Give the page a clear identity during navigation tests -->
  <main>
    <h1>About</h1>
    <p>Learn more about this retro navigation experiment.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact | Retro Page Transitions</title>
</head>
<body>
  <!-- Keep this navigation identical across all three pages -->
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <!-- Give the page a clear identity during navigation tests -->
  <main>
    <h1>Contact</h1>
    <p>Get in touch about this retro page transitions demo.</p>
  </main>
</body>
</html>

Test the hard page swaps

Each navigation click loads a separate document. Testing the full loop confirms that every link works before any page effect changes the experience.

Before you click through the pages, do you expect the browser to animate the change?

Select Home in the navigation.
Select About in the navigation.
Select Contact in the navigation.
Select Home once more.

Each click should replace the page immediately. You should see a normal hard page swap with no animation.

That unanimated swap is intentional. It gives you a clear baseline for the transition work ahead.

A Navigation Link Not Working?

Confirm that index.html, about.html, and contact.html are in the same folder.
Compare the three href values with the filenames in the code editor's sidebar.
Reload the browser preview after saving every file.

Ask for help tracing the broken link:

Your three-page site now has a working navigation baseline. Next, you will turn these hard page swaps into a visible crossfade.

Enable View Transitions

Your three pages now link correctly. Every click still replaces one page with an abrupt hard swap.

A shared CSS rule lets a supporting browser animate navigation between separate pages on the same origin. In this step, you will opt the site into the View Transition API and confirm its default crossfade.

In this step, get ready to:

Create a shared stylesheet containing the cross-document transition rule.
Connect all three HTML pages to the shared stylesheet.
Reload the site and verify the default crossfade between pages.

Add the browser opt-in

Cross-document transitions need an opt-in rule on both pages involved in a navigation. A shared stylesheet gives every page the same rule.

Switch back to the code editor from earlier.
Create styles.css inside the retro-page-transitions folder using your editor's file sidebar.
Add the cross-document transition rule by pasting this code:

@view-transition {
  navigation: auto;
}

What does this rule do?

The @view-transition at-rule opts a document into cross-document transitions.
The navigation: auto descriptor lets a supporting browser start a transition during eligible same-origin navigation.
The browser supplies a crossfade until you add a custom effect.

Save styles.css.
Confirm that styles.css appears beside the three HTML files in the editor's file sidebar.

Can't find the stylesheet?

Check that styles.css sits directly inside retro-page-transitions. It should be at the same folder level as index.html.

Help me check where my stylesheet was created.

✔️ Awesome, I've got everything!

Your shared stylesheet now contains the complete browser opt-in rule.

ⓧ I'd like to double check the full code

@view-transition {
  navigation: auto;
}

Connect Home and About

The source page needs to load the shared stylesheet. The destination page needs to load it too.

Connect the first two pages to styles.css using this line inside each page's head section:

<link rel="stylesheet" href="styles.css" />

What does this link do?

The rel="stylesheet" attribute identifies the linked file as a stylesheet.
The href="styles.css" attribute points the browser to the shared file in the same folder.

Switch back to the index.html editor tab.
Place the copied stylesheet link inside the page's head section.
Save index.html.
Return to the local browser preview from earlier.
Reload the Home page.

You should see the Home page render with its navigation links intact.

Return to the code editor from earlier.
Switch to the about.html editor tab.
Place the copied stylesheet link inside the page's head section.
Save about.html.
Return to the local browser preview from earlier.

Before you test this pair, predict whether the next page will hard swap or crossfade.

Click the About navigation link.

You should see the Home page fade out while the About page fades in.

There it is: your first cross-document transition now runs between Home and About.

No crossfade between Home and About?

Confirm that both index.html and about.html contain the stylesheet link inside their head sections. Confirm that both pages use the same local server address.

Help me diagnose why the crossfade is missing.

Complete the three-page flow

Contact still needs the same stylesheet link. Once it has the link, every navigation path can use the shared opt-in rule.

Return to the code editor from earlier.
Switch to the contact.html editor tab.
Place the same stylesheet link from the previous substep inside the page's head section.
Save contact.html.
Return to the local browser preview from earlier.
Reload the About page.

Before you check the complete flow, predict what should happen when you navigate through all three pages.

Click the Contact navigation link.

You should see the About page crossfade into the Contact page.

Click the Home navigation link.
Click the About navigation link.

Each page change should now use the same default crossfade. The navigation links should continue to load the correct pages.

Contact still swaps instantly?

Check that contact.html contains the same stylesheet link as the other pages. Confirm that styles.css remains in the same folder as all three HTML files.

Help me fix the Contact page transition.

Your three-page site now turns ordinary navigation into a browser-native crossfade. Every page shares the same transition configuration.

Next up, you will replace the default crossfade with your first retro wipe effect.

Apply an IE-Style Wipe

Your three pages now hand each same-origin navigation to the View Transition API. The browser proves that setup with a default crossfade.

That crossfade lacks the retro character this site needs. The ie-page-transitions library replaces it with a classic wipe configured through page metadata.

In this step, get ready to:

Load the ie-page-transitions assets on every page.
Configure Wipe left as the page-entry effect.
Confirm every menu destination uses the wipe.

Wire the wipe into the home page

A stylesheet defines the retro animation. A render-blocking module reads the effect configuration before the incoming page appears.

The page-entry metadata selects effect 7. That effect produces a right-to-left wipe lasting 0.5 seconds.

Switch back to index.html in your code editor.
Find the closing </head> tag.
Paste this integration block directly above the closing tag:

<!-- 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>

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

What does this code do?

The stylesheet supplies the animation for the selected wipe.
The module script reads the transition metadata during cross-document navigation.
The blocking="render" attribute lets the script configure the transition before the page renders.
The Page-Enter tag applies Wipe left when Home becomes the incoming page.

Save index.html.
Return to the browser preview from earlier.
Click the About link.
Click the Home link.

On the return to Home, you will see the new page wipe in from the right. Your first retro transition is working.

Still seeing the crossfade on Home?

Confirm the browser preview keeps both pages on the same local origin.
Check that all three new tags sit inside the document head.
Reload Home before testing the About-to-Home navigation again.

Help me troubleshoot why the Wipe left effect is not replacing the default crossfade on index.html.

Extend the wipe to the other pages

The incoming document supplies its own page-entry configuration. About and Contact need the same integration block so every destination can play the wipe.

Switch back to about.html in your code editor.
Find the closing </head> tag.
Paste this integration block directly above the closing tag:

<!-- 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>

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

Why repeat this block?

About becomes a separate incoming document during navigation. Its own document head must load the library assets before the page-entry metadata can activate Wipe left.

Save about.html.
Return to the browser preview.
Click the Home link.
Click the About link.

About now enters with the same right-to-left wipe as Home.

Does About still crossfade?

Confirm the stylesheet URL ends with ie-page-transitions.css.
Confirm the script URL ends with ie-page-transitions.mpa.js.
Check that the metadata uses Transition=7.

Help me find why about.html still uses the default crossfade.

Switch back to contact.html in your code editor.
Find the closing </head> tag.
Paste this integration block directly above the closing tag:

<!-- 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>

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

What changes on Contact?

Contact now loads the same animation definitions as the other pages. Its page-entry metadata selects Wipe left whenever a visitor follows a link to it.

Save contact.html.
Return to the browser preview.
Click the Contact link.

Contact now wipes into view from the right. All three destinations have the same retro effect.

Does Contact skip the wipe?

Confirm contact.html contains the integration block only once.
Check that Contact still loads the shared stylesheet containing the cross-document opt-in rule.
Reload Contact before testing the link again.

Help me troubleshoot why contact.html does not play the IE-style wipe.

Verify every navigation path

Before you test the complete menu, what do you expect to replace the default crossfade on each click?

Click the Home link.
Click the About link.
Click the Contact link.
Click the Home link.

You will see Wipe left on every page change. The default crossfade has been replaced across the complete site.

✔️ Awesome, I've got everything!

Great work. Home, About and Contact now load the library before applying the same classic wipe.

ⓧ I'd like to double check the full code

Confirm that the following block appears once inside the document head of index.html. Repeat this comparison for about.html.

Complete the same comparison for contact.html.

<!-- 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>

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

Capturing a half-second transition takes careful timing. Pause during the wipe so the moving page edge is visible.

Your site now has its first classic IE effect. Next up, you will add a picker that lets visitors choose which transition plays.

Add the Effect Picker

The wipe already proves that your View Transition API setup works across separate pages. Every visitor currently sees that same effect.

An effect picker gives each visitor control over the next animation. The ie-page-transitions library reads the saved choice on every page.

In this step, get ready to:

Add the same effect picker to all three page menus.
Save each selection with localStorage.
Verify that the selected effect follows the visitor between pages.

Add the picker to each menu

Each picker option holds the number for one classic effect. You will offer Wipe left as Wipe, Random dissolve as Fade, plus Checkerboard across.

Switch back to index.html in your code editor.
Find the menu containing the Home link.
Add the effect picker after the existing links by pasting this markup:

<!-- Let visitors choose the next page transition. -->
<label for="effect-picker">Effect</label>
<select id="effect-picker">
  <option value="7">Wipe</option>
  <option value="12">Fade</option>
  <option value="10">Checkerboard</option>
</select>

What does this markup do?

The label identifies what the picker controls.
The 7 value selects Wipe left.
The 12 value selects the pixel-style Random dissolve effect.
The 10 value selects Checkerboard across.

Save index.html.
Refresh the Home page in your browser preview.

You should see an Effect picker in the menu. Its options should be Wipe, Fade, plus Checkerboard.

Switch to about.html in your code editor.
Paste the same picker markup after the existing menu links.
Save about.html.
Click the About link in your browser preview.

You should see the same effect picker in the About page menu.

Switch to contact.html in your code editor.
Paste the same picker markup after the existing menu links.
Save contact.html.
Click the Contact link in your browser preview.

You should now see an identical effect picker on all three pages. The menu is consistent across the site.

Picker missing from a page?

Confirm that the picker sits inside the same menu as the existing links. Check that the select element uses the effect-picker ID.

Ask for help comparing the three menus.

Save the selected effect

Each navigation loads a new HTML document. Browser storage gives those documents one shared place to retrieve the visitor's selection.

Select the retro-page-transitions folder in your editor's file sidebar.
Use your editor's file creation control to create effect-picker.js inside that folder.

You should see effect-picker.js beside the three HTML files in the file sidebar.

Add the storage logic to effect-picker.js by pasting this code:

const storageKey = "retro-transition-effect";
const savedEffect = localStorage.getItem(storageKey) ?? "7";

const transitionMeta = document.querySelectorAll(
  'meta[http-equiv="Page-Enter"], meta[http-equiv="Page-Exit"]'
);

// Apply the saved choice before the transition library initializes.
transitionMeta.forEach((meta) => {
  meta.content = `revealTrans(Duration=0.5,Transition=${savedEffect})`;
});

// Keep the picker synchronized with the saved browser preference.
window.addEventListener("DOMContentLoaded", () => {
  const effectPicker = document.querySelector("#effect-picker");
  effectPicker.value = savedEffect;

  effectPicker.addEventListener("change", () => {
    localStorage.setItem(storageKey, effectPicker.value);

    transitionMeta.forEach((meta) => {
      meta.content = `revealTrans(Duration=0.5,Transition=${effectPicker.value})`;
    });
  });
});

What does this code do?

The storageKey gives the saved preference one consistent name.
The savedEffect value retrieves the previous selection.
The fallback value 7 keeps Wipe as the starting effect.
The change listener stores a new selection before updating the page transition metadata.

Save effect-picker.js.

The saved script should remain visible beside index.html. This confirms that the shared file exists in the correct folder.

JavaScript file in the wrong place?

Confirm that effect-picker.js sits directly inside retro-page-transitions. Check that the filename ends with .js.

Ask for help checking the file location.

✔️ Awesome, I've got everything!

Your shared effect storage script is complete. Make sure effect-picker.js is saved before continuing.

ⓧ I'd like to double check the full code

Compare your complete effect-picker.js file with this reference.

const storageKey = "retro-transition-effect";
const savedEffect = localStorage.getItem(storageKey) ?? "7";

const transitionMeta = document.querySelectorAll(
  'meta[http-equiv="Page-Enter"], meta[http-equiv="Page-Exit"]'
);

// Apply the saved choice before the transition library initializes.
transitionMeta.forEach((meta) => {
  meta.content = `revealTrans(Duration=0.5,Transition=${savedEffect})`;
});

// Keep the picker synchronized with the saved browser preference.
window.addEventListener("DOMContentLoaded", () => {
  const effectPicker = document.querySelector("#effect-picker");
  effectPicker.value = savedEffect;

  effectPicker.addEventListener("change", () => {
    localStorage.setItem(storageKey, effectPicker.value);

    transitionMeta.forEach((meta) => {
      meta.content = `revealTrans(Duration=0.5,Transition=${effectPicker.value})`;
    });
  });
});

The shared script must run before the transition library reads the page metadata. Loading it first lets the saved value replace the fixed wipe value.

Switch back to index.html.
Find the existing script whose source ends with ie-page-transitions.mpa.js.
Add the saved-effect script directly above the library script by pasting these lines:

<!-- Apply the saved effect before the transition library reads the page metadata. -->
<script src="effect-picker.js"></script>

Why does script order matter?

The library reads the Page-Enter metadata plus the Page-Exit metadata while the document loads. Loading effect-picker.js first puts the saved effect in place before that read happens.

Save index.html.
Refresh the Home page in your browser preview.
Select Checkerboard from the picker.
Refresh the Home page again.

The picker should still display Checkerboard. Your browser has retrieved the saved selection after the reload.

Selection resets after refresh?

Check that effect-picker.js loads above the existing library script. Confirm that the picker still uses the effect-picker ID.

Ask for help tracing the saved value.

Connect the picker across every page

The selection can now survive a reload on the Home page. Loading the same script on the remaining pages lets one choice control the next navigation across the full site.

Switch to about.html in your code editor.
Add the saved-effect script block directly above the existing library script.
Save about.html.
Click the About link in your browser preview.

You should see the checkerboard effect during navigation. The About page picker should display Checkerboard after the page loads.

Switch to contact.html in your code editor.
Add the saved-effect script block directly above the existing library script.
Save contact.html.

Before you navigate, which effect do you expect the Contact page to use?

Click the Contact link in your browser preview.

You should see the checkerboard effect again. The Contact page picker should also display Checkerboard.

Select Fade from the Contact page picker.

Before the final navigation, which effect do you expect the Home page to use?

Click the Home link in your browser preview.

You should see the pixel-style fade during navigation. The Home page picker should display Fade after the page loads.

Saved choice appears without the effect?

Confirm that every page still contains its transition metadata. Check that each page loads effect-picker.js before the library script.

Ask for help tracing the stored effect through the three pages.

Your picker now carries one effect choice across all three pages. Next, you will confirm that the site remains usable when animations are unsupported or reduced.

Support Reduced Motion

Your three-page site already remembers a visitor's chosen effect across navigation. Now you will make its retro effects considerate of browser support.

Some browsers ignore cross-document transitions. The site needs a normal page swap in those browsers.

Some visitors request reduced motion. The effects provided through the View Transition API should yield to that preference.

In this step, get ready to:

Confirm that navigation still works in an unsupported browser.
Add a reduced-motion rule to the shared stylesheet.
Compare the site's two motion modes.

Confirm the unsupported-browser fallback

Progressive enhancement keeps ordinary HTML links as the site's foundation. The animation layer activates only when the browser understands the cross-document transition opt-in.

Firefox provides a practical fallback test when its current version lacks cross-document support. The compatibility table lets you confirm that state before testing.

Switch back to the local browser preview from the previous step.
Select the preview's address bar.
Copy the local site URL.
Record the copied address here: your local site URL.
Open the browser compatibility table.
Confirm that your Firefox version lacks support for cross-document @view-transition navigation.

You now have an unsupported browser for a real fallback check. The next navigation tests whether the links remain independent from the animation feature.

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type Firefox into system search.
Press Enter to open Firefox.
Paste your local site URL into the Firefox address bar.
Press Enter to load the Home page.
Select checkerboard from the effect picker.

Before you click About, predict whether the selected effect can block navigation when transition support is missing.

Click the About link in the site menu.

You'll see the About page load with a normal page swap. The picker still shows checkerboard because the site's localStorage logic continues to work.

Cannot Run the Unsupported-Browser Check?

If your Firefox version supports cross-document transitions, use the compatibility table to identify another installed browser without support.

Ask for help choosing a valid fallback test browser.

Add the reduced-motion override

The prefers-reduced-motion media feature carries a visitor's motion preference into CSS. A matching rule can stop the transition snapshots from animating while leaving the page change intact.

Return to the shared stylesheet in your code editor.
Locate the existing @view-transition { navigation: auto; } rule.
Add this reduced-motion rule directly below the existing rule:

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

What Does This Rule Do?

The media query activates when the visitor requests reduced motion.
The view-transition pseudo-elements represent the animated snapshots of the old page and the new page.
The animation: none !important declaration overrides the classic effect while that preference is active.

Save the shared stylesheet.
Return to the supporting browser preview from earlier.
Press Cmd+Option+I on macOS or Ctrl+Shift+I on Windows to open Chrome DevTools.
Press Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows to open the Command Menu.
Type rendering into the Command Menu.
Select Show Rendering.
Select prefers-reduced-motion:reduce under Emulate CSS media feature prefers-reduced-motion.
Select checkerboard from the effect picker.

Before you follow the next link, predict whether the checkerboard animation plays with reduced motion emulated.

Click the Contact link in the site menu.

You'll see the Contact page load without the checkerboard animation. The menu remains usable throughout the normal page swap.

Reduced Motion Still Animating?

Confirm that the media query sits outside the existing @view-transition block. Check that all three view-transition selectors appear inside the media query.

Help me debug the reduced-motion CSS rule.

Compare both motion modes

A side-by-side behavior check confirms that the rule responds only to the visitor's preference. The same links should navigate successfully in both modes.

Select No emulation from the reduced-motion menu in the Rendering panel.
Select wipe from the site's effect picker.

Before you click Home, predict which visual effect returns when reduced-motion emulation is off.

Click the Home link in the site menu.

You'll see the wipe effect play as the Home page loads. This confirms that the reduced-motion rule leaves the normal animated experience available.

Select prefers-reduced-motion:reduce again in the Rendering panel.

Before you click About, predict whether the wipe plays under reduced-motion emulation.

Click the About link in the site menu.

You'll see the About page load without the wipe. You have now proven that unsupported browsers retain normal navigation while reduced-motion visitors receive a motion-free experience.

Your retro transitions now enhance the site without controlling access to its pages. Next, you will deploy the folder and test the same behavior at a public URL.

Deploy the Site

The local version of your three-page site now handles classic transitions and graceful fallbacks. Its final limitation is that only you can open it.

In this step, you will use Netlify Drop to publish the existing folder at a public URL. Visitors can then try every effect in their own browser.

In this step, get ready to:

Publish the completed retro-page-transitions folder with Netlify Drop.
Make the deployment publicly accessible from its assigned URL.
Confirm that wipe, fade, and checkerboard effects work across the deployed pages.

Publish the completed folder

A static host serves your HTML, CSS, and JavaScript from one web address. Netlify Drop can publish the completed folder directly because this project does not require a build process.

Why use Netlify Drop?

Netlify Drop accepts a folder containing static website files. It publishes those files without requiring a Git repository or deployment command.

The free plan supports dropped projects. This gives the finished site a shareable address with little deployment setup.

Visit the Netlify Drop page in the browser from earlier.
Create a free Netlify account if needed by following the registration flow.
Sign in to Netlify before uploading the site.
Locate the retro-page-transitions folder in Finder on macOS or File Explorer on Windows.
Drag the retro-page-transitions folder onto the Drop here area.
Wait for Netlify to finish publishing the folder.
Copy the Preview URL ending in netlify.app.
Record the copied address here: your public deployment URL.

Your three static pages are now hosted at the Preview URL. The project visibility setting controls whether other people can open that address.

Folder not publishing?

Confirm that index.html sits directly inside retro-page-transitions. A nested copy of the project folder can prevent the homepage from loading.

Drag the exact folder containing index.html, about.html, and contact.html onto the drop area again.

Help me diagnose why my static site folder is not publishing correctly with Netlify Drop.

Make the deployment public

Netlify projects can start with private visibility. Public visibility allows anyone with the URL to open the production deployment.

Making this project public exposes only the files you uploaded from retro-page-transitions. Other files on your computer remain private.

Select Project configuration in your Netlify project dashboard.
Select General in the project configuration sidebar.
Scroll to the Visitor access section.
Open Project visibility.
Select Edit visibility.
Choose Public for the production deployment.
Select Save.

You should now see the project marked as public. Anyone with the Preview URL can reach the deployed pages without signing in.

Cannot select Public?

Your Netlify team may enforce private visibility. Use a team where your account has permission to change project visibility.

Help me make my Netlify deployment publicly accessible.

Test every effect at the public URL

A live homepage confirms that deployment succeeded. The stronger check follows links between all three deployed pages while the picker changes the active effect.

Before you test, predict whether the first public page change will behave exactly like the local preview.

Return to the supporting browser from earlier.
Use the browser menu to open a private browsing window.
Paste your public deployment URL into the address bar.
Press Enter to load the deployment.

You should see the Home page without a Netlify login or password prompt. The address bar should show the deployed URL instead of a local preview address.

Choose wipe in the effect picker.
Click About in the shared navigation.

You should see the wipe effect play while the browser moves to about.html.

Choose fade in the effect picker.
Click Contact in the shared navigation.

You should see the fade effect play while the browser moves to contact.html.

Choose checkerboard in the effect picker.
Click Home in the shared navigation.

You should see the checkerboard effect play while the browser returns to index.html.

What does this public test prove?

The deployed index.html, about.html, and contact.html pages retain their shared navigation.
The deployed stylesheet keeps @view-transition { navigation: auto; } active for cross-document navigation.
The View Transition API animates navigation between pages on the same deployed site.
The ie-page-transitions library applies the classic effect selected by the visitor.
The picker stores its current choice in localStorage as the visitor moves between pages.
The deployed files preserve the reduced-motion fallback. Unsupported browsers retain normal page navigation.

Transitions missing online?

Confirm that the private window belongs to the supporting browser you used for local testing. An unsupported browser still follows every link without animation.

Check that reduced motion is not enabled while testing the effects. The deployed stylesheet respects that preference by disabling or minimizing animation.

Help me diagnose why my deployed page transitions are missing.

Your three-page retro site is now public. Visitors can choose an effect and watch it play as they move between every deployed page.

Secret mission

Run a Transition Release Audit

Audit all three retro effects across your published pages. Verify that reduced-motion visitors plus unsupported browsers can still navigate the complete site.

Clean Up Your Resources

Choose whether to keep the project available, pause your work, or delete its local folder. The public site uses a free static host with no ongoing project cost.

Resources you used:

The local retro-page-transitions folder that contains your editable site.

Keep everything running

No action is needed. Choose this if you plan to keep improving or demonstrating your retro page transitions.

Keep the retro-page-transitions folder on your computer.
Leave the public deployment online for future demonstrations.
Continue using the public URL without an ongoing project cost.

Pause - I'll come back to this later

The static site has no local process to pause. You can close your tools while the published pages remain available.

Close your code editor.
Keep the retro-page-transitions folder on your computer.
Leave the public deployment online until you return.

Delete - I don't want to use this again

Deleting the folder permanently removes your editable local copy. Your public deployment stays online as a working demo.

Choose the instructions for your computer below.

macOS

Emptying the system trash permanently removes the local files. The deployed copy remains unaffected.

Search Finder for the retro-page-transitions folder.
Move the retro-page-transitions folder to Trash.
Empty Trash.
Search Finder again for the retro-page-transitions folder.

You should see no matching local folder. Your public URL should still load the deployed site.

Windows

Emptying the system recycle bin permanently removes the local files. The deployed copy remains unaffected.

Search File Explorer for the retro-page-transitions folder.
Move the retro-page-transitions folder to the Recycle Bin.
Empty the Recycle Bin.
Search File Explorer again for the retro-page-transitions folder.

You should see no matching local folder. Your public URL should still load the deployed site.

Nice Work!

You did it! Your three-page retro site is live at a public URL with selectable classic effects powered by the View Transition API and ie-page-transitions.

What you learned:

Built a multi-page static site with shared navigation across Home, About, and Contact pages. Published the finished site to a free static host.
Enabled cross-document page transitions with the browser's View Transition API. Applied classic Internet Explorer effects through the ie-page-transitions library.
Created a persistent effect picker for wipe, fade, and checkerboard effects. Added graceful fallbacks for unsupported browsers and visitors who request reduced motion.
Secret Mission: Extended the finished site through an optional challenge that pushed your transition skills further.

Ready to quiz yourself?