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:

1. Install and import the StPageFlip as an ES module.

# NPM
$ npm install page-flip --save

import {PageFlip} from 'page-flip';

2. Or load the page-flip.browser.js in the HTML document.

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

3. Add pages to the flipbook. The data-density is used to specify the book type: ‘hard’ or ‘soft’.

<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>

4. Initialize the library and pass options as follows:

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

5. Load pages from HTML.

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

6. Or load pages from images if running on the Canvas mode:

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

7. Available options to config the StPageFlip instance.

// ES Module
const pageFlip = new PageFlip(
      document.getElementById("example"),
        {
          // start page index
          startPage: 0,
          size: SizeType.FIXED,
          // width & height *(REQUIRED)
          width: 0,
          height: 0,
          // min/max width & height
          minWidth: 0,
          maxWidth: 0,
          minHeight: 0,
          maxHeight: 0,
          // draw book shadows
          drawShadow: true,
          // animation speed
          flippingTime: 1000,
          // allows to switch to portrait mode
          usePortrait: true,
          // z-index property
          startZIndex: 0,
          // auto resizes the parent container to fit the book
          autoSize: true,
          // max opacity of shadow
          maxShadowOpacity: 1,
          // shows book cover
          showCover: false,
          // supports mobile scroll?
          mobileScrollSupport: true
        }
);

8. API methods.

// Get the total number of pages.
catalogBook.getPageCount();
// Get the current orientation.
catalogBook.getOrientation();
// Get the current book size and position.
catalogBook.getBoundsRect();
// Get the current page index. The index starts at 0.
catalogBook.getCurrentPageIndex();
// Move to a specific page without animation.
catalogBook.turnToPage(4);
// Move to the next page without animation.
catalogBook.turnToNextPage();
// Move to the previous page without animation.
catalogBook.turnToPrevPage();
// Flip to the next page with animation.
catalogBook.flipNext('bottom');
// Flip to the previous page with animation.
catalogBook.flipPrev('top');
// Flip to a specific page with animation.
catalogBook.flip(6, 'bottom');
// Load pages from image URLs.
catalogBook.loadFromImages([
  '/images/catalog-1.jpg',
  '/images/catalog-2.jpg',
]);
// Load pages from existing HTML elements.
catalogBook.loadFromHTML(document.querySelectorAll('.catalog-page'));
// Update pages from existing HTML elements.
catalogBook.updateFromHTML(document.querySelectorAll('.catalog-page'));
// Update pages from image URLs.
catalogBook.updateFromImages([
  '/images/catalog-1.jpg',
  '/images/catalog-2.jpg',
]);
// Remove the book element and event handlers.
catalogBook.destroy();

9. Event handlers.

// Fires after a page turn.
catalogBook.on('flip', function (event) {
  console.log('Current page:', event.data);
});
// Fires when the book switches between portrait and landscape mode.
catalogBook.on('changeOrientation', function (event) {
  console.log('Orientation:', event.data);
});
// Fires when the book state changes.
catalogBook.on('changeState', function (event) {
  console.log('State:', event.data);
});
// Fires after initialization and start page loading.
catalogBook.on('init', function (event) {
  console.log('Initial page:', event.data.page);
  console.log('Initial mode:', event.data.mode);
});
// Fires after pages update through update methods.
catalogBook.on('update', function (event) {
  console.log('Updated page:', event.data.page);
  console.log('Updated mode:', event.data.mode);
});

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.

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