Scroll-based inline flipbook animation for the internet. Checkout the demo.
npm install flipbook
id (required) [String] The id of the element where the flipbook will be inserted.
path (required) [String] The relative path the directory where the images are.
filename (required) [String] The pattern of filename (%3d = 3 digits or 001, 002, etc, ex. 'images-%3d').
extension (required) [String] The type of image file (png or jpg).
count (required) [Number] Count of images in directory.
speed (optional) [Number 0 to 1] How fast the scroll advances the frames (0: slow, 1: fast). Defaults to 0.5.
cover (optional) [Boolean] If the flipbook should go full window height, and center-crop (like CSS's
background-size: cover). Defaults to false.
loaded (optional) [Function] Callback function when the flipbook has loaded all images and is ready to play through. Defaults to none.
gif (optional) [Boolean] Autoplay the animation and loop like a gif without scroll interaction.
Convert a video to image sequence with ffmpeg:
ffmpeg -i input.mp4 -r 12 frames/%d.png
License & Credit
MIT © Russell Goldenberg