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

Check Here – [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


Read More – 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 to 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
  • clickEventForward: boolean – default: true forwarding click events to the page children’s html elements (only for a and button tags)
  • useMouseEvents: boolean – default: true using mouse and touch events to page flipping
  • 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


  • 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
  • updateFromImages(images: ['path-to-image1.jpg', ...]) – Update page from images
  • destroy() – Destructor. Remove a root HTML element and all event handlers 

Realistic Book Page Flip Animation In JavaScript, 3D Page Flip Effect, Page Flip Effect Plugin, Modern Web Design


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.