v0.3.1 · MIT
Page transitions for server-rendered websites. Keep your HTML, add one container and one line of JavaScript.
Pagefold catches it before the browser throws the page away.
Plain HTML, your own server. Click twice and the first request is aborted.
The old page leaves, the new one arrives, and everything around them stays put.
04 · What you get
Drag to explore.
05 · Three pieces
<main id="pagefold" class="transition-fade">
...
</main>.transition-fade { transition: opacity .3s }
html.is-animating .transition-fade {
opacity: 0
}import Pagefold from 'pagefold'
new Pagefold()06 · Modules
Every module is a separate import, and the sizes below are what each one adds. Nothing you do not use reaches your bundle.
Keeps the title, meta tags and stylesheets in sync with each page.
pagefold/head Runs the scripts of the new page, in order and only once.
pagefold/scripts Animate with GSAP, Motion or any JavaScript animation library.
pagefold/js The old and the new page animate at the same time: crossfades and pushes.
pagefold/overlap Fetches pages on hover or as links scroll into view, so clicks feel instant.
pagefold/preload Announces the new page, moves focus and respects reduced motion.
pagefold/a11y Smooth scrolling to the top and to anchors, with room for a fixed header.
pagefold/scroll Copies the body class of the new page so page-specific styles keep working.
pagefold/body-class Names your pages and picks the animation by where you come from and where you go.
pagefold/route-name A thin loading bar for the visits that take a while.
pagefold/progress Submits forms without a reload, with the same transitions as links.
pagefold/forms Replaces only part of the page, like a detail panel, and leaves the rest alone.
pagefold/fragment Sends a page view to GA4, Tag Manager or Matomo after every visit.
pagefold/analytics Logs every hook with its timing while you build.
pagefold/debug Every module has its own page with when to use it and every option. Start with the guide.