StPageFlip: Realistic Book Page Flip Animation In JavaScript

StPageFlip is a vanilla JavaScript page flip library that creates realistic book and magazine page-turning animations from HTML elements or image files.

It works for digital catalogs, storybooks, portfolios, brochures, magazines, and document-style interfaces that need a familiar page-turning interaction. The library supports mobile touch gestures, portrait and landscape layouts, configurable shadows, soft page turns, and hard cover pages in HTML mode.

You can install it with npm or load the browser bundle from a CDN. The API includes methods for loading pages, turning pages programmatically, updating book content, reading the current page index, and listening for flip, orientation, state, init, and update events.

For another card-style interaction pattern, compare this stacked card carousel.

Basic usage:

Install StPageFlip

Install the page-flip package and import PageFlip in your JavaScript.

# NPM
$ npm install page-flip --save

import {PageFlip} from 'page-flip';

For a browser build, load page-flip.browser.min.js from a CDN or a local file.

<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.min.js"></script>

Add Flipbook Pages

Create the page elements inside the flipbook container. In HTML mode, use data-density="hard" for hard covers or other rigid pages.

<div class="flip-book" id="example">
  <div class="page page-cover page-cover-top" data-density="hard">
    <div class="page-content">
      <h2>BOOK TITLE</h2>
    </div>
  </div>
  <div class="page">
    <div class="page-content">
      <h2 class="page-header">Page Header 1</h2>
      <div class="page-image" style="background-image: url(1.jpg)"></div>
      <div class="page-text">Page Content 1</div>
      <div class="page-footer">2</div>
    </div>
  </div>
  <div class="page">
    <div class="page-content">
      <h2 class="page-header">Page Header 2</h2>
      <div class="page-image" style="background-image: url(2.jpg)"></div>
      <div class="page-text">Page Content 2</div>
      <div class="page-footer">3</div>
    </div>
  </div>
  ... more pages here ...
  <div class="page page-cover page-cover-bottom" data-density="hard">
    <div class="page-content">
      <h2>THE END</h2>
    </div>
  </div>
</div>

Initialize StPageFlip

Create a PageFlip instance with the flipbook container and configuration object.

// ES Module
const pageFlip = new PageFlip(
      document.getElementById("example"),
        {
          // options here
        }
);
// Browser
const pageFlip = new St.PageFlip(
      document.getElementById("example"),
        {
          // options here
        }
);

Load Pages

Load existing HTML page elements with loadFromHTML().

pageFlip.loadFromHTML(document.querySelectorAll(".page"));

For image-based books in Canvas mode, pass an array of image URLs to loadFromImages().

pageFlip.loadFromImages(['1.jpg', '2.jpg' ... ]);

All Configuration Options

The width and height values are required and must be greater than 0. Use "fixed" or "stretch" for size.

// ES Module
const pageFlip = new PageFlip(
  document.getElementById("example"),
  {
    startPage: 0,
    size: "fixed",
    // Required base page size
    width: 400,
    height: 600,
    // Used with size: "stretch"
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 420,
    maxHeight: 1350,
    drawShadow: true,
    flippingTime: 1000,
    usePortrait: true,
    startZIndex: 0,
    autoSize: true,
    maxShadowOpacity: 1,
    showCover: false,
    mobileScrollSupport: true,
    swipeDistance: 30,
    clickEventForward: true,
    useMouseEvents: true,
    showPageCorners: true,
    disableFlipByClick: false
  }
);

API Methods

// Get the total number of pages.
pageFlip.getPageCount();
// Get the current orientation.
pageFlip.getOrientation();
// Get the current book size and position.
pageFlip.getBoundsRect();
// Get the current page index. The index starts at 0.
pageFlip.getCurrentPageIndex();
// Move to a specific page without animation.
pageFlip.turnToPage(4);
// Flip to a specific page with animation.
pageFlip.flip(6, 'bottom');
// Update pages from existing HTML elements.
pageFlip.updateFromHtml(document.querySelectorAll('.page'));
// Update pages from image URLs.
pageFlip.updateFromImages([
  '/images/catalog-1.jpg',
  '/images/catalog-2.jpg'
]);

Events

Register an init listener before calling loadFromHTML() or loadFromImages() if you need the initialization event.

pageFlip.on('init', function (event) {
  console.log('Initial page:', event.data.page);
  console.log('Initial mode:', event.data.mode);
});
pageFlip.on('flip', function (event) {
  console.log('Current page:', event.data);
});
pageFlip.on('changeOrientation', function (event) {
  console.log('Orientation:', event.data);
});
pageFlip.on('changeState', function (event) {
  console.log('State:', event.data);
});
pageFlip.on('update', function (event) {
  console.log('Updated page:', event.data.page);
  console.log('Updated mode:', event.data.mode);
});
// Remove all handlers registered for an event.
pageFlip.off('flip');

FAQs:

Q: Can I use StPageFlip without npm?
A: Yes. Load page-flip.browser.min.js from a CDN or local bundle, then create the book with new St.PageFlip(...).

Q: Does StPageFlip create CSS-only page flip animations?
A: No. StPageFlip uses JavaScript to control page loading, page turning, orientation changes, and events. Use a CSS-only flip book snippet when you only need a static CSS effect.

Q: Why do hard pages only work in some examples?
A: Hard and soft page types apply to HTML mode. Add data-density="hard" to cover pages loaded with loadFromHTML().

Q: Can StPageFlip load image-based books?
A: Yes. Use loadFromImages() with an array of image URLs.

Alternatives:

• Create Smooth, Realistic Page Flip Animations with FlipBook.js

Changelog:

v2.0.7 (04/18/2021)

• Fixed a bug with resizing the window after updating book state

v2.0.6 (04/17/2021)

• fix shadow after update

v2.0.5 (02/27/2021)

• Fix var name

v2.0.2 (02/15/2021)

• Fix constructor, fix td

v2.0.1 (02/14/2021)

• Refactor

v2.0.0 (08/17/2020)

• Refactor

v1.2.1 (08/16/2020)

• Added “init” and”update” events

v1.1.0 (07/11/2020)

• Append event forwarding to child elements

v1.0.3 (07/11/2020)

• Bugfix

v1.0.1 (07/08/2020)

• Refactoring

v1.0.1 (07/02/2020)

• Fix: Swipe distance and mobile scroll