Realistic Book Page Flip Animation In JavaScript – StPageFlip

Category: Animation , Javascript , Recommended | July 11, 2020
Author: Nodlik
Views Total: 42 views
Official Page: Go to website
Last Update: July 11, 2020
License: MIT


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 install page-flip --save
import {PageFlip} from 'page-flip';

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

<script src=""></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 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 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>
  ... more pages here ...
  <div class="page page-cover page-cover-bottom" data-density="hard">
    <div class="page-content">
      <h2>THE END</h2>

4. Initialize the library and pass options as follows:

// ES Module
const pageFlip = new PageFlip(
          // options here

// Browser
const pageFlip = new St.PageFlip(
          // options here

5. Load pages from HTML.


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(

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

// get the current page index

// turn to a specific page
pageFlip.turnToPage(pageNum: number);

// turn to the next page

// turn to the previous page

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

9. Event handlers.

// triggered by page turning
pageFlip.on("flip", (e) => {
  document.querySelector(".page-current").innerText = + 1;

// triggered when the state of the book changes
pageFlip.on("changeState", (e) => {
  document.querySelector(".page-state").innerText =;

// triggered when page orientation changes
pageFlip.on("changeOrientation", (e) => {
  document.querySelector(".page-orientation").innerText =;


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

You Might Be Interested In:

Leave a Reply