Getting started

Install Pagefold, mark up your page and run your first transition in a few minutes.

Pagefold turns the links of a server-rendered site into page transitions. When someone clicks a link it fetches the next page, animates the old content out, swaps it for the new content, animates it in, and keeps the address bar, the back button and the scroll position working.

1. Install

npm install pagefold

2. Mark up the page

Pick the part of your page that changes between pages and give it an id. Everything outside it (header, footer, audio player) stays untouched.

<body>
  <header><!-- stays --></header>

  <main id="pagefold" class="transition-fade">
    <!-- replaced on every visit -->
  </main>
</body>

Every page of your site must contain that same element. Pagefold fetches the full HTML page and takes this element from it, so you do not need an API or special responses.

3. Style the transition

While a visit runs, Pagefold puts state classes on the html element. CSS does the animation:

.transition-fade {
  transition: opacity 0.3s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

The class name only needs to contain transition-, which is what Pagefold looks for to know how long to wait.

4. Start it

import Pagefold from 'pagefold'

const pagefold = new Pagefold()

That is all. Links on the same site now load without a page reload, with a fade.

Browser support

Pagefold is built for the browsers of 2020 onwards (ES2020) and uses fetch, AbortController and the History API. Two features need more from the browser and simply do nothing without it: the View Transitions option, and slow-connection detection in Preload. Everything else behaves the same.

If a browser cannot do something, the visit falls back to a normal page load. A visitor never ends up on a broken page.

What next

• Understand what happens during a visit: How it works.
• Animate with a JavaScript library: GSAP, Motion, Web Animations.
• Add features with plugins: update the <head>, preload pages, show a progress bar, manage focus and more. See the Plugins section.
• Check what your server needs to send: Your server.
• Copy answers to common needs from Recipes.
• Change the defaults in Options.