Flipbook ✅
A mouse-controlled image sequencer.
RELEASED in Sygnal Media v0.1.6
Click and drag left-right to flip forwards-backwards through the image sequence
Reverse the direction if your images are in a different order
Loops automatically between the last and first frame
Uses
3D models;
Create a rotating-model effect by generating your images from a rotating 3D model, e.g. 5-degree or 10-degree increments
The Primary advantage over 3D models is image quality, since there is no dependence on CPU/GPU processing capability of the client.
Demo
Properties
JSON File
Link
Identify the JSON file URL, or choose it from assets if you have uploaded it.
Direction
Boolean
Allows you to reverse the direction of rotation.
Setup
Consists of two parts;
Your images
A JSON file to identify and sequence them
JSON files can be stored in Webflow assets if you like, and so can your images, however getting the Webflow-generated image URLs may be a lot of work. Also, Webflow will class the JSON as a Lottie, which will not affect anything.
Images
Typically you'll use 36 ( at 10-degree increments ) or 72 ( at 5-degree increments ) images, but there is no specific requirement, just keep them evenly spaced for consistent rotation.
Typically generated from a 3D model program
Make certain they're all the same dimensions
AVIF is recommended for better compression and faster loading
More images means a smoother rotation but longer load time. Fewer images means larger rotation increments, but a faster load time.
JSON file
Describes the contents
which lists the images in order from 0 to 360 degrees
Contains an array of URLs. If there is no origin, it's assumed the images are in the same origin and path as the JSON file.
Make certain your host supports CORS access.
JSON files can be stored in Webflow assets if you like, and so can your images
Place your JSON file anywh
Relative paths;
As of this writing, you can use these URLs for testing;
Future
Mouse sensitivity setting
Looping controls. Ability to disable looping.
Automatic flipping at a specified speed. Only applies when the mouse is outside of the image
Messaging and indicators control
Loading animation choice
Media source
Animated AVIF frames
Video frames
Series of photos from 1 .. n
User control
Hover ( left = 0, right = n )
Hover + mousewheel
Options
Loop
Reverse direction
Notes
Flipbook uses a series of sequenced images, or frames from an animated AVIF, or possibly MP4- the idea is to be able to smoothly and instantly scrub forward and backwards across a timeline so the images "flow" organically. Right now I'm using it for 360 rotation of 3D models, but it could be for anything- a customer walking into a store sequence, a person putting on a VR headset. a Lambo driving off the lot, a customer unboxing their new iPad. I'd love to be able to connect that directly to IX3 scrolling interactions, or place it within other animation flows. Component prop binding makes the most sense in my head, but the geek in me wants to see if if reactivity can play a role here through page vars.
Last updated