Ready-made CSS themes

Two drop-in stylesheets for common transitions: fade and slide.

A theme is a CSS file. Import it, give your container the theme’s class, and you are done.

import 'pagefold/css/fade.css'   // or slide.css

Or in HTML:

<link rel="stylesheet" href="/node_modules/pagefold/dist/css/slide.css" />

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

What they do

Fade

old page fades outnew page fades in

Slide, forward

old leaves to the leftnew comes from the right

Slide, back

old leaves to the rightnew comes from the left

Slide goes the other way on the back button, as long as animateHistoryBrowsing is on.

Fade

Class: transition-fade. The page fades out and the new one fades in.

/examples/fade/ Open in a new tab Source on GitHub

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home · Fade</title>
  <link rel="stylesheet" href="../_lib/fade.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
  <main id="pagefold" class="transition-fade">
    <h1>Home</h1>
    <p>The first page. Click a link and watch the page change.</p>
    <div class="card" style="background:#1b1bff"></div>
  </main>
  <script src="../_lib/pagefold.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

new Pagefold()

style.css

*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,sans-serif;background:#0a0a0a;color:#fafaf8}
nav{display:flex;gap:1.25rem;padding:1rem 1.5rem;border-bottom:1px solid #2c2c2c}
/* Links: the accent color with a quiet underline that gets stronger on hover */
a{color:#5af0ae;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:rgba(90,240,174,.5);transition:color .15s,text-decoration-color .15s,text-decoration-thickness .15s}
a:hover{color:#00ff9c;text-decoration-thickness:2px;text-decoration-color:currentColor}
a:focus-visible{outline:2px solid #5af0ae;outline-offset:3px;border-radius:2px}
main{padding:2rem 1.5rem}
h1{margin:0 0 .5rem;font-size:2rem}
p{margin:0 0 1rem;max-width:36rem;color:#a3a39e}
.card{height:7rem;max-width:36rem;border-radius:12px}

Slide

Class: transition-slide. The page leaves to the left while fading and the new page comes in from the right. On back and forward visits it goes the other way. For that to happen, animate history visits:

new Pagefold({ animateHistoryBrowsing: true })

/examples/slide/ Open in a new tab Source on GitHub

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home · Slide</title>
  <link rel="stylesheet" href="../_lib/slide.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
  <main id="pagefold" class="transition-slide">
    <h1>Home</h1>
    <p>The first page. Click a link and watch the page change.</p>
    <div class="card" style="background:#1b1bff"></div>
  </main>
  <script src="../_lib/pagefold.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

new Pagefold({ animateHistoryBrowsing: true })

style.css

*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,sans-serif;background:#0a0a0a;color:#fafaf8}
nav{display:flex;gap:1.25rem;padding:1rem 1.5rem;border-bottom:1px solid #2c2c2c}
/* Links: the accent color with a quiet underline that gets stronger on hover */
a{color:#5af0ae;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:rgba(90,240,174,.5);transition:color .15s,text-decoration-color .15s,text-decoration-thickness .15s}
a:hover{color:#00ff9c;text-decoration-thickness:2px;text-decoration-color:currentColor}
a:focus-visible{outline:2px solid #5af0ae;outline-offset:3px;border-radius:2px}
main{padding:2rem 1.5rem}
h1{margin:0 0 .5rem;font-size:2rem}
p{margin:0 0 1rem;max-width:36rem;color:#a3a39e}
.card{height:7rem;max-width:36rem;border-radius:12px}
body{overflow-x:hidden}

Customizing

Both read CSS custom properties, so you do not have to rewrite them:

Property	Default	Used by
`--pagefold-duration`	`0.4s`	fade, slide
`--pagefold-distance`	`3rem`	slide

:root {
  --pagefold-duration: 0.6s;
  --pagefold-distance: 6rem;
}

They are small on purpose

Each file is a dozen rules that use the state classes. When you need something different, copy the file and edit it: Animating with CSS explains each rule.

The slide theme, including the reversed direction on back, is checked in the project’s browser tests. A theme that needs extra markup, such as a full-screen overlay, cannot be a plain stylesheet, so it is not included. A CSS-only version is possible with a pseudo-element on html; for a measured transition, animate the container as well so Pagefold has something to wait for.