The book that opens on scroll

Scroll, 3DGSAP, CSS onlyMediumCompressed weight: Demo 7.4 KBGSAP + ScrollTrigger 45 KBLenis 5.3 KBFreeDownload the zip

Scroll inside the preview

A minimal-style 3D scroll animation for the page of a made-up small publisher: a clothbound book, closed on the table, opens as you scroll down. The cover swings on its hinge and lies down on the left, a few thin pages follow one after another, curving as they turn, and at the end the book is open on the first sentence of chapter one. The only colour is the red ribbon bookmark.

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 book that opens on scroll</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up publisher, Bramble Press. The stage sticks while you scroll: a closed clothbound book lies on the table,
       the cover swings open on its hinge, a few thin pages fan over one after another, and the book ends open flat on a
       page with one short sentence. Scroll back up and it closes again. Book, pages and shadows are placed by the script -->
  <main>
    <section class="corsa" data-corsa>
      <div class="palco" data-palco>
        <header class="testa">
          <a class="marchio" href="#" data-entra>Bramble Press</a>
          <p class="testa__nota" data-entra>The autumn list</p>
        </header>

        <div class="scena" data-scena aria-hidden="true">
          <div class="ombra" data-ombra></div>
          <div class="libro" data-libro>
            <!-- the back cover and the block of pages, with the fore-edge and the tail showing the stacked paper -->
            <div class="dorso-retro faccia"></div>
            <div class="blocco faccia" data-blocco>
              <div class="pagina-base">
                <p class="pagina-base__capitolo" data-cap>Chapter one</p>
                <p class="pagina-base__frase" data-frase>Some stories wait for the&nbsp;right&nbsp;page.</p>
                <span class="pagina-base__ombra" data-ombra-pagina></span>
              </div>
              <div class="nastro" data-nastro></div>
            </div>
            <div class="taglio taglio--piede faccia" data-taglio-piede></div>
            <div class="taglio taglio--davanti faccia" data-taglio-davanti></div>
            <div class="pagine" data-pagine></div>
            <!-- the cover: cloth outside with the title pressed in, endpaper inside -->
            <div class="copertina" data-copertina>
              <div class="copertina__fuori faccia">
                <span class="copertina__titolo">Small<br>Hours</span>
                <span class="copertina__autore">M. Arden</span>
                <span class="copertina__luce" data-luce-cop></span>
              </div>
              <div class="copertina__dentro faccia">
                <span class="copertina__ex">Bramble Press</span>
                <span class="copertina__luce" data-luce-dentro></span>
              </div>
              <div class="copertina__spessore faccia"></div>
            </div>
          </div>
        </div>
        <p class="sr-only">Small Hours, by M. Arden. Chapter one: Some stories wait for the right page.</p>

        <p class="cenno" data-entra><span data-cenno>Scroll to open the book</span></p>
      </div>
    </section>
    <section class="dopo">
      <p class="dopo__testo">Small Hours is out in November, clothbound, 212 pages.</p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.

31 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 book that opens on scroll” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page with the name of a made-up small publisher, Bramble Press, and its autumn list at the top. In the middle, on the table, there is a closed book seen from above and in front: a beige cloth cover with the title Small Hours blind-pressed and the author’s name, the edge of the pages showing along the bottom and right sides, and a red ribbon bookmark poking out underneath. On opening the book settles on the table with its soft shadow. As you scroll the page holds still and the book opens: the cover rises on the spine’s hinge, darkens while it stands up, goes over and lies down on the left showing the endpaper with the publisher’s name. Then seven thin pages follow one after another: each one leaves the stack, lifts a little, curves with its free edge trailing, casts a shadow on the page below and lands on the left, slightly fanned from the others. Meanwhile the book glides so that the open spread ends in the middle, turns and lowers a little, and the ribbon sways as the pages pass over it. On the last page Chapter one and the first sentence, Some stories wait for the right page., appear, gaining weight as they arrive. Scroll back up and the book closes. The pointer tilts the book a few degrees on a spring, and a click lifts the corner of the top page.

How it works

A book made of flat faces

The book is a div with transform-style: preserve-3d, leaned back with rotateX as if it lay on the table. Inside are flat faces placed in space: the back cover at z zero, the block of pages at a z equal to its thickness, the two edges of the block turned 90 degrees with rotateX and rotateY, and the cover on top, with the cloth face and the endpaper turned 180 degrees and backface-visibility hidden.

The hinge

The cover and every page have their transform-origin on the spine edge and turn with rotateY from 0 to minus 180 degrees. While they turn they rise a little, with the sine of the progress, and move from their height on the right-hand stack to their height on the left-hand one, so the first page turned stays at the bottom on the left like in a real book.

The page that curves

Every page is made of five strips, each a child of the one before and turned a few degrees more: the rotations add up and the page curves. The curve grows halfway through the turn and goes back to zero as the page lands, so it starts flat and ends flat.

Everything from one timeline

A ScrollTrigger timeline with scrub takes a single number from 0 to 1; on every frame the script works out from that number the cover, each page with its own window of scroll, the shadows, the light on the faces, the glide of the book and the closing sentence. Lenis smooths the scroll.

Values to change

Name	File	Default	What it changes
`PAGES`	script.js	`7`	How many thin pages turn after the cover (2 to 14).
`SIZE`	script.js	`1`	How big the book is (1 = fits the screen).
`CURL`	script.js	`14`	How much a page curves while it turns, in degrees per strip.
`LIFT`	script.js	`0.07`	How high a turning page rises off the stack, as a fraction of the page width.
`TILT`	script.js	`[56, 40]`	How much the book leans back at the start and at the end, in degrees.
`TURN`	script.js	`[-9, -2]`	How much the book is turned on the table at the start and at the end, in degrees.
`FAN`	script.js	`0.8`	How much the turned pages fan out on the left, in degrees.
`SMOOTH`	script.js	`0.7`	How softly the book follows the scroll, in seconds (0 = glued to it).
`RIDE`	script.js	`1`	How much scroll the whole thing takes: 2 is twice as long.

Try them in the Playground

When to use it

For the page of a publisher, a bookshop, a novel or a paper magazine; for the launch of a book or a catalogue; and in general for a product to be opened slowly as you scroll down.

On phones

The same animation with the sizes adapted: the book is measured on both the width and the height of the box, so the open spread fits with a margin, and the closing sentence is sized to the page.

With reduced motion

No smoothed scroll and no turning pages: the book appears with a fade, already open on the first sentence.

Pitfalls

The turned pages kept their height on the right-hand stack and ended up stacked upside down on the left: the first one turned lay on top. The height has to move from the right-hand stack to the left-hand one while the page turns.
A page made of strips with a different shade per strip looks banded: the shade has to be almost the same on every strip, and the strips overlap by a pixel and a half so that no light shows between them.
overflow: hidden on a container flattens the 3D of everything inside it: it goes only on the final faces, never on the groups.

Libraries

GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Newsreader (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 7.4 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.

Testing

Tested on 24 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.