The split-flap transition

TransitionsGSAP, CSS onlyMediumCompressed weight: Demo 5.9 KBGSAP 28 KBFreeDownload the zip

A minimal click page change: the top half of the page lifts off a thin crease and falls towards you like a flap on a departures board. On the back of the flap is the bottom half of the new page, which lands with a small knock; the crease fades and the text rises.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The split-flap transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the first page: its headline sits right across the crease, so the fold runs through its letters -->
    <section class="page page--a is-on" data-page="a" aria-label="Rooms">
      <header class="bar">
        <span class="brand">Saltmoor</span>
        <nav class="nav" aria-label="Pages">
          <a href="#rooms" aria-current="page">Rooms</a>
          <a href="#garden" data-go="b">Garden</a>
        </nav>
      </header>
      <div class="hero">
        <h1 class="headline" data-headline>Rooms</h1>
        <div class="below">
          <p class="lede">Eleven rooms above the harbour, each with a window on the boats.</p>
          <a class="go go--next" href="#garden" data-go="b" data-autoclic>
            <span class="go__text">See the garden</span>
            <svg class="go__arrow" viewBox="0 0 22 12" aria-hidden="true"><path d="M1 6h19M15 1.5 20 6l-5 4.5"/></svg>
          </a>
        </div>
      </div>
      <footer class="foot">
        <span>A small hotel by the sea</span>
        <span>Harbour Road</span>
      </footer>
    </section>

    <!-- the second page, dark: it is printed on the back of the flap and under it -->
    <section class="page page--b" data-page="b" aria-label="Garden" aria-hidden="true">
      <header class="bar">
        <span class="brand">Saltmoor</span>
        <nav class="nav" aria-label="Pages">
          <a href="#rooms" data-go="a">Rooms</a>
          <a href="#garden" aria-current="page">Garden</a>
        </nav>
      </header>
      <div class="hero">
        <h2 class="headline" data-headline>Garden</h2>
        <div class="below">
          <p class="lede">Breakfast under the fig tree, from eight until the bread runs out.</p>
          <a class="go go--back" href="#rooms" data-go="a" data-autoclic>
            <svg class="go__arrow" viewBox="0 0 22 12" aria-hidden="true"><path d="M21 6H2M7 1.5 2 6l5 4.5"/></svg>
            <span class="go__text">Back to the rooms</span>
          </a>
        </div>
      </div>
      <footer class="foot">
        <span>A small hotel by the sea</span>
        <span>Harbour Road</span>
      </footer>
    </section>

    <!-- the fold, built by the script: the half of the old page that stays, the flap, and the crease -->
    <div class="fold" data-fold aria-hidden="true"></div>
    <div class="crease" data-crease aria-hidden="true"></div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

29 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The split-flap transition” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The site of a small made-up hotel by the sea, Saltmoor, in two pages: Rooms, paper-coloured, and Garden, dark. The huge serif headline sits right across a horizontal crease a little above the middle. On load the crease draws itself from the middle to the edges in terracotta, the text below rises and the crease fades. A click on See the garden brings the crease back; the top half of the page lifts a few degrees towards you, hesitates a moment and then falls faster and faster round the crease, in real 3D with perspective, getting darker as it turns edge-on. Above the crease the top half of the dark page is uncovered meanwhile, in the flap's shadow; once the flap passes upright you see its back, which is the bottom half of the new page, and the headline Garden comes together across the crease. The flap lands with a knock, bounces back a few degrees twice and lies still; the crease fades and the line of text and the link back rise one after the other. Back to the rooms goes round forwards the same way, like a board that only ever turns one way.

How it works

Three pieces of two pages

The real pages are never cut. For each change the script makes whole copies of the two pages and clips them in half with clip-path, on the --cut variable: underneath is the real new page, above it the old page's bottom half (the one that will be covered), and on top of everything the flap. In the copies data-go and data-autoclic are removed and the links leave the Tab order.

The two-faced flap

The flap is a div with transform-style: preserve-3d and transform-origin on the crease. Its front face is the old page's top half; its back is the new page's bottom half, already turned 180 degrees round the crease, with backface-visibility hidden. Turning the flap by −180 degrees (a negative rotateX brings the top edge towards the viewer) brings the back face back to zero, the right way up and in the right place.

Light and shadow

Every piece has a black veil over it with its opacity worked out from the angle: the front face darkens as SHADE·(1 − cos θ), the back brightens as SHADE·(1 + cos θ), the half about to be covered darkens in the last 80 degrees, and on the new half just uncovered there is a soft shadow near the crease that goes as the flap comes down.

The fall and the knock

First a 14 degree lift with power2.out (the hesitation), then the fall to 180 with power3.in, speeding up like a weight. On landing the flap comes back up KNOCK degrees in 0.13 seconds, falls again, then a second bounce a fifth as big: two knocks dying away. Meanwhile the crease fades and the text rises with back.out.

Click, phone and reduced motion

Each change is one timeline with timeScale for SPEED; a click that comes while the page is turning waits in a queue. The measures (the crease at 47% of the height, the headline fitting the width) are taken again on every resize. With reduced motion the old page fades out and then the new one fades in, without the two showing through each other.

Values to change

Name	File	Default	What it changes
`FOLD`	script.js	`0.95`	The seconds the flap takes to fall flat.
`LIFT`	script.js	`0.18`	The seconds the flap hesitates just lifted off the crease, before it falls.
`KNOCK`	script.js	`9`	How many degrees the flap bounces back when it lands: 0 = it just lands.
`SHADE`	script.js	`0.42`	How dark the flap gets when it is edge-on (0 to 0.8).
`DEPTH`	script.js	`1500`	The perspective in pixels: smaller, and the flap comes further out of the page.
`SPEED`	script.js	`1`	The speed of everything: 2 is twice as fast, 0.5 half as fast.

Try them in the Playground

When to use it

To move from one page to another on a quiet site with a big headline in the middle: a hotel, a bed and breakfast, a station or a journey, a restaurant with its menu of the day, a portfolio with one project per page. It works well with a light and a dark page taking turns.

On phones

The same transition with the sizes adapted: the headline shrinks to fit the screen, the crease stays a little above the middle and the text wraps underneath. A tap on the link turns it.

With reduced motion

Nothing turns: the old page fades out and then the new one fades in.

Pitfalls

With a veil that darkened in proportion to the angle, as soon as the flap lifted a few degrees the whole top half turned grey at once: with 1 − cos θ the light changes almost nothing at first and a lot near upright, like real paper.
The back face has to be turned 180 degrees round the crease, not round its own centre: turned round its centre, after the flap's half turn it ended up half a page out of place.
With a 2400 pixel perspective the flap looked flat, a blind getting shorter; at 1500 the edge coming towards the viewer widens and it reads as a flap.
The copies of the pages carried data-autoclic with them: the autopilot clicks every marked element and would have clicked the copies. data-autoclic and data-go are removed from the copies.
With reduced motion the first version cross-faded the two pages and for a moment the two headlines read on top of each other: now the old one fades out before the new one comes.

Libraries

GSAP 3.15.0, Newsreader (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.9 KB; the libraries: GSAP 28 KB.

Testing

Tested on 19 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.