v0.3.1 · MIT
Pages that fold into each other.
Page transitions for server-rendered websites. Keep your HTML, add one container and one line of JavaScript.
-
Works with the HTML you have
No API and no special responses. Pagefold fetches your pages and swaps one container.
-
Cancels what nobody needs
Click twice, and the first request is aborted, not left running in the background.
-
Small and modular
A 7.5 KB core with no dependencies. Every module is its own import, so you ship what you use.
-
Animate with anything
CSS, GSAP, Motion, the Web Animations API or the View Transitions API. Your choice.
-
Accessible by default
Announces the new page, moves focus, and skips motion when people ask for less of it.
-
A hook at every step
Fully typed, awaited, replaceable. Plugins use the same API you do.
Up and running in three pieces
Mark the container
<main id="pagefold" class="transition-fade">
...
</main>Style the transition
.transition-fade { transition: opacity .3s }
html.is-animating .transition-fade {
opacity: 0
}Start it
import Pagefold from 'pagefold'
new Pagefold()Add only what you need
Every module is a separate import, and the sizes below are what each one adds. Nothing you do not use reaches your bundle.
-
Head
1.3 KBKeeps the title, meta tags and stylesheets in sync with each page.
pagefold/head -
Scripts
0.9 KBRuns the scripts of the new page, in order and only once.
pagefold/scripts -
JS
1.2 KBAnimate with GSAP, Motion or any JavaScript animation library.
pagefold/js -
Overlap
1.4 KBThe old and the new page animate at the same time: crossfades and pushes.
pagefold/overlap -
Preload
2.2 KBFetches pages on hover or as links scroll into view, so clicks feel instant.
pagefold/preload -
A11y
1.9 KBAnnounces the new page, moves focus and respects reduced motion.
pagefold/a11y -
Scroll
2.1 KBSmooth scrolling to the top and to anchors, with room for a fixed header.
pagefold/scroll -
Body class
0.8 KBCopies the body class of the new page so page-specific styles keep working.
pagefold/body-class -
Route name
1.3 KBNames your pages and picks the animation by where you come from and where you go.
pagefold/route-name -
Progress
1.2 KBA thin loading bar for the visits that take a while.
pagefold/progress -
Forms
1.5 KBSubmits forms without a reload, with the same transitions as links.
pagefold/forms -
Fragment
1.4 KBReplaces only part of the page, like a detail panel, and leaves the rest alone.
pagefold/fragment -
Analytics
0.9 KBSends a page view to GA4, Tag Manager or Matomo after every visit.
pagefold/analytics -
Debug
1.0 KBLogs 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.