Realistic Book Page Flip Animation In JavaScript – StPageFlip

StPageFlip is a JavaScript library to create a realistic, mobile-friendly, landscape/portrait page flip (also called page turning) animation just like a book or magazine.

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 total number of pages
pageFlip.getPageCount();
// get the current page index
pageFlip.getCurrentPageIndex();
// turn to a specific page
pageFlip.turnToPage(pageNum: number);
// turn to the next page
pageFlip.turnToNextPage();
// turn to the previous page
pageFlip.turnToPrevPage();
// turn to the next page with animation
pageFlip.flipNext(corner: 'top' | 'bottom');
// turn to the previous page with animation
pageFlip.flipPrev(corner: 'top' | 'bottom');
// turn to a specific page with animation
pageFlip.flip(pageNum: number, corner: 'top' | 'bottom');
// update pages
pageFlip.updateFromHtml(items: NodeListOf | HTMLElement[]);
pageFlip.updateFromImages(images: ['path-to-image1.jpg', ...]);
// destroy the instance
pageFlip.destroy();

9. Event handlers.

// triggered by page turning
pageFlip.on("flip", (e) => {
  document.querySelector(".page-current").innerText = e.data + 1;
});
// triggered when the state of the book changes
pageFlip.on("changeState", (e) => {
  // ("user_fold", "fold_corner", "flipping", "read")
});
// triggered when page orientation changes
pageFlip.on("changeOrientation", (e) => {
  // ("portrait", "landscape")
});
// triggered when the book is init and the start page is loaded
pageFlip.on("init", (e) => {
  ({page: number, mode: 'portrait', 'landscape'})
});
// triggered when the book pages are updated
pageFlip.on("update", (e) => {
  // ({page: number, mode: 'portrait', 'landscape'})
});

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