HTML Flip Book

A TypeScript library for creating realistic page-flip animations in the browser.

📖 Live Demo · 📚 API Docs

Installation

# Vanilla JavaScript
npm install html-flip-book-vanilla

# React
npm install html-flip-book-react
Copy

Features

Core

• RTL & LTR Support — Horizontal flip direction for both reading directions
• Touch & Mouse Input — Drag pages with touch gestures or mouse
• Velocity-based Flipping — Fast swipes complete the flip automatically
• Progress-based Flipping — Partial drags complete based on progress threshold
• Concurrent Flip Animations — Multiple pages can flip simultaneously
• Hover Effects — Subtle inner-shadow preview on page edges
• Leaves Buffer — Performance optimization for large books (only render nearby pages)

React Component

• Toolbar Components — Pre-built navigation UI:
  • Toolbar — Container component
  • PrevButton / NextButton — Navigate pages
  • FirstPageButton / LastPageButton — Jump to ends
  • PageIndicator — Current page display
  • FullscreenButton — Toggle fullscreen mode
• Imperative API — flipNext(), flipPrev(), flipToPage(), jumpToPage()
• Ref Handle — Access current page index, total pages, navigation state

Examples

• Live Demo — English (LTR) and Hebrew (RTL) books

Roadmap

• [ ] Curl animation / animated page edges
• [ ] Vertical flip direction
• [ ] Vue component
• [ ] Angular component

Bugs