3D Page Flip Effect For Vue.js – flipbook

flipbook is a Vue 3/2 component that displays images in a 3D page flip effect just like a book.

How to use it:

1. Import and register the flipbook.

// Vue 3
import Flipbook from 'flipbook-vue'

// Vue 2
import Flipbook from 'flipbook-vue/vue2'

// register the component
export default {
  components: { Flipbook }
}

2. Add the flipbook component to the template and define an array of images.

pages:
  type: Array
  required: true
pagesHiRes:
  type: Array
  default: -> []
flipDuration:
  type: Number
  default: 1000
zoomDuration:
  type: Number
  default: 500
zooms:
  type: Array
  default: -> [1, 2, 4]
perspective:
  type: Number
  default: 2400
nPolygons:
  type: Number
  default: 10
ambient:
  type: Number
  default: 0.4
gloss:
  type: Number
  default: 0.6
swipeMin:
  type: Number
  default: 3
singlePage:
  type: Boolean
  default: false
forwardDirection:
  validator: (val) -> val == 'right' or val == 'left'
  default: 'right'
centering:
  type: Boolean
  default: true
startPage:
  type: Number
  default: null
loadingImage:
  type: String
  default: spinner
clickToZoom:
  type: Boolean
  default: true
dragToFlip:
  type: Boolean
  default: true
wheel:
  type: String
  default: 'scroll' // zoom

4. Slot props.

<flipbook :pages="pages" v-slot="flipbook">
  <button @click="flipbook.flipLeft">Previous Page</button>
  <button @click="flipbook.flipRight">Next Page</button>
</flipbook>

// can flip to prev page
canFlipLeft
True if it can flip to previous page. NOTE: Can return false if currently being animated.

// can flip to next page
canFlipRight

// can zoom in
True if it can zoom in.

// can zoom out
True if it can zoom out.

// current page
page

// total number of pages.
numPages

// zoom in 
zoomIn()

// zoom out
zoomOut()

5. Events.

• @flip-left-start
• @flip-left-end
• @flip-right-start
• @flip-right-end
• @zoom-start
• @zoom-end

Preview:

Changelog:

1.0.0-beta.4 (01/15/2023)

• Fix scroll when dragToFlip is false

1.0.0-beta.3 (01/07/2023)

• Add wheel=”zoom”

v1.0.0alph4 (09/03/2022)

• Add navigator check

Download Details:

Author: ts1

Live Demo: https://ts1.github.io/flipbook-vue/

Download Link: https://github.com/ts1/flipbook-vue/archive/master.zip

Official Website: https://github.com/ts1/flipbook-vue

Install & Download:

# Yarn
$ yarn add flipbook-vue

# NPM
$ npm install flipbook-vue --save