Simple and Flexible Book Page Flip Animation In JavaScript | StPageFlip

Book Page, Flip Effect Javascript JS Library is powerful, simple, and flexible to create a beautiful and realistic page-flipping effect.


  • Works with simple images on Canvas and complex HTML blocks
  • Has a simple API and flexible configuration
  • Compatible with mobile devices
  • Supports landscape and portrait screen mode
  • Supports soft and hard page types (only in HTML mode)
  • No dependencies

Must Read: [Animation] 3D Page Flip Images Effect For Vue component | flipbook

How to make use of it:


npm install page-flip

1. To create a new PageFlip object:

import { PageFlip } from 'page-flip';

const pageFlip = new PageFlip(htmlParentElement, settings);

// or if you're using a script tag and page-flip.browser.js:
const pageFlip = new St.PageFlip(htmlParentElement, settings);

2. To draw on a canvas, use loadFromImages:

pageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);

3. To load a page from HTML elements – use loadFromHtml:

<div id="book">
    <div class="my-page" data-density="hard">
        Page Cover
    <div class="my-page">
        Page one
    <div class="my-page">
        Page two
    <div class="my-page">
        Page three
    <div class="my-page">
        Page four
    <div class="my-page" data-density="hard">
        Last page
const pageFlip = new PageFlip(document.getElementById('book'), {
    width: 400, // required parameter - base page width
    height: 600, // required parameter - base page height


Must Read: A Vue.js Component To Flip Animation Elements Library


To set configuration define these parameters when creating an object:

  • width: number – required
  • height: number – required
  • size: ("fixed", "stretch") – default: "fixed" Whether the book will be stretched under the parent element or not
  • minWidth, maxWidth, minHeight, maxHeight: number You must set threshold values ​​with size: "stretch"
  • drawShadow: bool – default: true Draw shadows or not when page flipping
  • flippingTime: number (milliseconds) – default: 1000 Flipping animation time
  • usePortrait: bool – default: true Enable switching to portrait mode. !This mode uses cloning of HTML elements (pages)
  • startZIndex: number – default: 0 The initial value of z-index
  • startPage: number – default: 0 Page number from which to start viewing
  • autoSize: bool – default: true If this value is true, the parent element will be equal to the size of the book
  • maxShadowOpacity: number [0..1] – default: 1 Shadow intensity (1: max intensity, 0: hidden shadows)
  • showCover: boolean – default: false If this value is true, the first and the last pages will be marked as hard and will be shown in the single-page mode
  • mobileScrollSupport: boolean – default: true disable content scrolling when touching a book on mobile devices
  • swipeDistance: number – default: 30 (px) minimum distance to detect swipe (new on 1.1.0)
  • clickEventForward: boolean – default: true forwarding click events to the page children’s HTML elements (only for a and button tags) (new on 1.1.0)
  • useMouseEvents: boolean – default: true using mouse and touch events to page flipping (new on 1.2.0)
  • disableFlipByClick: boolean – default: false if this value is true, flipping by clicking on the whole book will be locked. Clicking will only work in corners (new on 2.0.3)


Must Read: Elegant Carousel With A Wipe Switch Slider jQuery Plugin | wipeSlider

  • getPageCount: number – Get the number of all pages
  • getOrientation: 'portrait', 'landscape' – Get the current orientation: portrait or landscape
  • getBoundsRect: PageRect – Get current book sizes and position
  • getCurrentPageIndex: number – Get the current page number (starts at 0)
  • turnToPage(pageNum: number) – Turn to the specified page number (without animation)
  • turnToNextPage() – Turn to the next page (without animation)
  • turnToPrevPage() – Turn to the previous page (without animation)
  • flipNext(corner: 'top' | 'bottom') – Turn to the next page (with animation)
  • flipPrev(corner: 'top' | 'bottom') – Turn to the previous page (with animation)
  • flip(pageNum: number, corner: 'top' | 'bottom') – Turn to the specified page (with animation)
  • loadFromImages(images: ['path-to-image1.jpg', ...]) – Load page from images
  • loadFromHtml(items: NodeListOf | HTMLElement[]) – Load page from HTML elements
  • updateFromHtml(items: NodeListOf | HTMLElement[]) – Update page from HTML elements (new on 0.4.0)
  • updateFromImages(images: ['path-to-image1.jpg', ...]) – Update page from images (new on 0.4.0)
  • destroy() – Destructor. Remove a root HTML element and all event handlers (new on 0.4.0)

Read More –

[CSS3] Responsive jQuery Coverflow Touch Slider Plugin | flipster
Realistic Flip Clock in JavaScript (jQuery) and CSS Animations
Airport-Like Text Flip Display Animation Plugin For jQuery | splitFlap

See Demo And Download


Official Website(Nodlik): Click Here

This superior jQuery plugin is developed by Nodlik. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…

Leave a Reply

Your email address will not be published. Required fields are marked *