Page Turn Book

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add to your <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect actually requires of your markup:

• [data-turn-book] on the outer element. It is the drag trigger and the element the perspective is applied through.
• [data-turn-leaf] on each turnable leaf, each containing exactly one [data-turn-face="front"] and one [data-turn-face="back"].
• Leaves must be absolutely positioned at the spine with transform-origin: 0 50%. That is what they rotate about, and it is the one piece of CSS the maths assumes rather than measures.
• Page width is read from the first leaf's offsetWidth. Give leaves a real width, not auto.

What is only this demo's styling and can be deleted: everything on .page, .plate, .caption, .notes, .idx, .pull, .colophon, .fin, .masthead, and the whole cream-paper palette. None of it is queried by the script. Your faces can contain anything: images, video posters, a full CMS-rendered article.

Non-obvious CSS the effect depends on:

• perspective on an ancestor of the leaves, and transform-style: preserve-3d on the book, the block, each leaf and each strip. Losing it anywhere in that chain flattens the curl into a plain rotation.
• backface-visibility: hidden on the flat faces, so a turned leaf shows its reverse rather than a mirrored front.
• The .turn-strip .turn-strip__side > * rule. Strips hold copies of your faces, so any transform, rounding, shadow or backface-visibility you put on a face has to be cancelled there or it is re-applied inside every strip. If you restyle the faces, keep that rule.
• Rules aimed at the flat faces must use the child combinator (.leaf[data-turn-leaf-state='turning'] > .leaf__face). A descendant selector also hits the copies inside the strips.
• overflow: hidden on the book in single-page mode. With no facing page to land on, the leaf swings off the side and has to be clipped.

Images: set draggable="false" on any <img> inside a leaf. Dragging across an image otherwise starts the browser's native drag, which fires pointercancel and kills the turn mid-gesture.

Options

Set on the [data-turn-book] element.

Optional child hooks: [data-turn-prev], [data-turn-next], [data-turn-status] (live region, gets "Spread 2 of 5").

Accessibility

• Arrow keys and Page Up/Down turn the page whenever the book has focus; :focus-visible draws a ring on it.
• The prev/next buttons are real <button>s and are disabled at each end of the book.
• [data-turn-status] is a polite live region announcing "Spread 2 of 5" after every turn.
• The turn is decorative. All content sits in the flat faces in the DOM and is readable with JavaScript off.

Reduced Motion Behaviour

Under prefers-reduced-motion: reduce the drag is not wired up and no strips are built. The buttons and arrow keys still work; they change the spread instantly instead of performing the turn. Nothing is hidden and nothing is left mid-animation.

Performance Notes

• Strips are built the first time a leaf moves, not up front. A four-leaf book with 18 strips would otherwise clone eight pages of markup 18 times before the visitor has touched anything.
• While a leaf is flat, its strips are display: none and nothing is written per frame. The flat faces are swapped back in the moment it settles, so resting type is never a stack of clipped copies.
• Strip widths are CSS custom properties on the book, so a resize re-measures two values instead of rebuilding the rig.
• Per frame the script writes one transform and one gradient per strip. At the default 18 strips that is 36 style writes, which is why the strip count is capped rather than left open.

Dependencies

• GSAP 3.15.0
• Draggable
• InertiaPlugin