GSAP transition

A page transition made with GSAP: the old page lifts away, the new one comes up and its parts follow one by one.

A transition written with a GSAP timeline instead of CSS. Pagefold gives GSAP the two moments, leaving and arriving, through the JS plugin, and waits until each one is over.

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

main.js

// GSAP does the animation. Pagefold waits for it, through the JS plugin.
const page = () => document.querySelector('#pagefold')

new Pagefold({
  plugins: [
    new PagefoldJs({
      animations: [
        {
          // From any page to any page
          from: '(.*)',
          to: '(.*)',
          // Leaving: the old content lifts and fades. Returning the tween makes Pagefold wait.
          out: () => gsap.to(page(), { opacity: 0, y: -24, duration: 0.3, ease: 'power2.in' }),
          // Arriving: the content comes up, then its parts follow one by one
          in: () =>
            gsap
              .timeline()
              .fromTo(page(), { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.4, ease: 'power3.out' })
              .from(page().querySelectorAll('h1, .lead, .card'), { opacity: 0, y: 18, stagger: 0.07, duration: 0.4, ease: 'power3.out' }, '-=0.25')
              .set(page(), { clearProps: 'all' }),
        },
        {
          // Chosen by a link with data-pagefold-animation="zoom"
          name: 'zoom',
          out: () => gsap.to(page(), { opacity: 0, scale: 0.94, duration: 0.3, ease: 'power2.in' }),
          in: () =>
            gsap.fromTo(page(), { opacity: 0, scale: 1.06 }, { opacity: 1, scale: 1, duration: 0.5, ease: 'power3.out', clearProps: 'all' }),
        },
      ],
    }),
  ],
})

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home · GSAP</title>
  <meta name="description" content="We design sites that feel alive. Click a link and watch GSAP take over the transition.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="top">
    <strong>Studio</strong>
    <nav>
      <a href="index.html">Home</a>
      <a href="work.html">Work</a>
      <a href="about.html">About</a>
      <a href="contact.html" data-pagefold-animation="zoom">Contact (zoom)</a>
    </nav>
  </header>
  <main id="pagefold">
    <h1>A studio for slow web</h1>
    <p class="lead">We design sites that feel alive. Click a link and watch GSAP take over the transition.</p>
    <div class="cards">
      <div class="card"><i style="background:#1b1bff"></i><b>Brand</b><span>Identity and tone</span></div>
      <div class="card"><i style="background:#00ff9c"></i><b>Web</b><span>Sites that move</span></div>
      <div class="card"><i style="background:#fafaf8"></i><b>Print</b><span>Paper still works</span></div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="../_lib/pagefold.js"></script>
  <script src="../_lib/js.js"></script>
  <script src="main.js"></script>
</body>
</html>

style.css

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font:16px/1.6 system-ui,sans-serif;background:#0a0a0a;color:#fafaf8}
/* 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}
a:hover{color:#00ff9c;text-decoration-color:currentColor}
a:focus-visible{outline:2px solid #5af0ae;outline-offset:3px;border-radius:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.5rem;border-bottom:1px solid #2c2c2c}
.top strong{font:700 .95rem ui-monospace,Menlo,monospace}
.top nav{display:flex;gap:1.25rem;flex-wrap:wrap}
main{padding:2rem 1.5rem 3rem;max-width:46rem}
h1{margin:0 0 .5rem;font-size:2.1rem;line-height:1.15}
p{margin:0 0 1rem;max-width:36rem;color:#c9c9c4}
.lead{color:#a3a39e;font-size:1.05rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.5rem}
.card{border:1px solid #2c2c2c;background:#141414;border-radius:12px;padding:.9rem}
.card i{display:block;height:3.2rem;border-radius:8px;margin-bottom:.6rem}
.card b{display:block;font-size:.95rem}
.card span{font-size:.82rem;color:#a3a39e}
@media (max-width:34rem){.cards{grid-template-columns:1fr}main{padding:1.25rem}}

What to try

Click Work, About and Home. The old content lifts and fades, the new content comes up, and then the title, the text and each card follow one after the other.
Click Contact (zoom). That link has data-pagefold-animation="zoom", so it gets a different animation: the page shrinks away and the next one grows into place.
Use the back button. Nothing special is needed: it runs the same animations.

How it works

The JS plugin takes a list of animations. The first one has from: '(.*)' and to: '(.*)', so it matches any visit. The second has a name, and runs when the link or the visit asks for it.

{
  from: '(.*)',
  to: '(.*)',
  out: () => gsap.to(page(), { opacity: 0, y: -24, duration: 0.3 }),
  in: () => gsap.timeline().fromTo(page(), { opacity: 0, y: 24 }, { opacity: 1, y: 0 }),
}

Return the tween. A GSAP tween or timeline is a promise, so returning it is all Pagefold needs to wait for it. There is no done to call.
Give the page back as it was. The timeline ends with clearProps, so GSAP leaves no inline style behind and your CSS keeps control.
Names pick the animation. data-pagefold-animation on a link, or navigate(url, { animation }), chooses the entry with that name.

More about it in GSAP and Animating with JavaScript.

This demo loads GSAP from a CDN (jsDelivr). Pagefold does not include GSAP: install it yourself and check its license.