Leaf Flip

A modern TypeScript library for creating realistic page turn effects in web applications. Inspired by turn.js, but rebuilt from the ground up with TypeScript and modern web standards.

Installation

npm install leaf-flip

Basic Usage

HTML Structure

<div id="book">
    <div>Page 1</div>
    <div>Page 2</div>
    <div>Page 3</div>
    <div>Page 4</div>
</div>

JavaScript/TypeScript

import { createTurnPage } from 'leaf-flip';

const element = document.getElementById('book');
const book = createTurnPage(element, {
    display: 'double',
    gradients: true,
    acceleration: true
});

API Reference

TurnPage Options

interface LeafOptions {
    page?: number;           // Initial page number
    pages?: number;          // Total number of pages
    width?: number;          // Container width
    height?: number;         // Container height
    gradients?: boolean;     // Enable shadow gradients
    duration?: number;       // Animation duration (ms)
    acceleration?: boolean;  // Enable hardware acceleration
    display?: 'single' | 'double'; // Page display mode
    when?: Record<string, (event: Event) => void>; // Event handlers
    corners?: {             // Custom corner configuration
        backward?: Corner[];
        forward?: Corner[];
        all?: Corner[];
    };
}

FlipPage Options

interface FlipOptions {
    folding?: HTMLElement | null;  // Element to fold
    corners?: 'backward' | 'forward' | 'all';  // Allowed corners
    cornerSize?: number;    // Corner sensitivity size
    gradients?: boolean;    // Enable shadow gradients
    duration?: number;      // Animation duration
    acceleration?: boolean; // Enable hardware acceleration
}

Methods

TurnPage Methods

book.next();               // Go to next page
book.previous();           // Go to previous page
book.setPage(number);      // Go to specific page
book.setDisplay('single'); // Change display mode
book.destroy();            // Clean up resources

FlipPage Methods

page.flip('tr');          // Flip top-right corner
page.disable(true);       // Disable interactions
page.resize();            // Update dimensions
page.destroy();           // Clean up resources

Events

book.element.addEventListener('pageChanged', (e) => {
    console.log('Current page:', e.detail.current);
    console.log('Previous page:', e.detail.previous);
});

page.element.addEventListener('flipStart', (e) => {
    console.log('Flip started:', e.detail);
});

Examples

Double Page Book

import { createTurnPage } from 'leaf-flip';

const book = createTurnPage(element, {
    display: 'double',
    gradients: true,
    duration: 600,
    when: {
        turned: (event) => {
            console.log('Page turned!');
        }
    }
});

Single Page Flip

import { createFlipPage } from 'leaf-flip';

const page = createFlipPage(element, {
    corners: 'all',
    cornerSize: 100,
    gradients: true
});

License

MIT © Giovani Rodriguez