Using a script tag

Use Pagefold without a bundler: plain script tags, global variables and a CDN.

If your site has no build step, use the UMD files: one per module, each a single minified file that puts a global variable on the page.

<main id="pagefold" class="transition-fade">...</main>

<script src="https://cdn.jsdelivr.net/npm/pagefold@0.2.0/dist/umd/pagefold.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pagefold@0.2.0/dist/umd/head.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pagefold@0.2.0/dist/umd/a11y.js"></script>
<script>
  new Pagefold({
    plugins: [new PagefoldHead({ awaitAssets: true }), new PagefoldA11y()],
  })
</script>

Order of the tags

gsap.js (if you use it)pagefold.jshead.js, a11y.js…new Pagefold({…})

Each file defines a global. new Pagefold needs all of them to exist, so it goes last.

Load pagefold.js first and the plugins after it. Pin a version in the URL, so an update never changes your site without you knowing.

The globals

File	Global
`pagefold.js`	`Pagefold` (the class, with `Pagefold.Plugin` attached for writing plugins)
`head.js`	`PagefoldHead`
`scripts.js`	`PagefoldScripts`
`js.js`	`PagefoldJs`
`overlap.js`	`PagefoldOverlap`
`preload.js`	`PagefoldPreload`
`a11y.js`	`PagefoldA11y`
`scroll.js`	`PagefoldScroll`
`body-class.js`	`PagefoldBodyClass`
`debug.js`	`PagefoldDebug`
`route-name.js`	`PagefoldRouteName`
`progress.js`	`PagefoldProgress`
`forms.js`	`PagefoldForms`
`fragment.js`	`PagefoldFragment`
`analytics.js`	`PagefoldAnalytics`

The globals are the classes themselves: there is no .default to read.

Sizes

The core is about 21 KB minified and 7 KB compressed. Modules are between 2 and 6 KB minified. Each file includes what it needs, including the small plugin base class, so loading several costs a little more than adding their sizes in the module list.

If you do have a bundler, import the modules instead: you get the smaller ones, with no duplicated code.

The CSS themes

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pagefold@0.2.0/dist/css/fade.css" />

With GSAP

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pagefold@0.2.0/dist/umd/pagefold.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pagefold@0.2.0/dist/umd/js.js"></script>
<script>
  new Pagefold({
    animationSelector: false,
    plugins: [
      new PagefoldJs({
        animations: [{
          out: (done) => gsap.to('#pagefold', { opacity: 0, duration: 0.4, onComplete: done }),
          in: (done) => gsap.fromTo('#pagefold', { opacity: 0 }, { opacity: 1, duration: 0.4, onComplete: done }),
        }],
      }),
    ],
  })
</script>

Checked

The browser tests load Pagefold with plain script tags and the Head and A11y globals in Chromium, Firefox and WebKit. Navigation without a reload, title updates and the screen reader announcement all work.