> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/flipbook.md).

# Flipbook ✅

A mouse-controlled image sequencer.

{% hint style="success" %}
**RELEASED** in **Sygnal Media v0.1.6** 
{% endhint %}

* 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

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FTHXViRN5q1xNFmh9Mu0C%2F2025-10-14_19-53-54.gif?alt=media&amp;token=4444a7dc-3441-48c3-9b9f-2064eb02b9ab" alt=""><figcaption></figcaption></figure>

{% embed url="<https://webflow-core-component-test.webflow.io/flipbook>" %}

## Properties

| Property  | Type    | Description                                                                   |
| --------- | ------- | ----------------------------------------------------------------------------- |
| 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;

1. Your images &#x20;
2. A JSON file to identify and sequence them&#x20;

{% hint style="warning" %}
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.&#x20;
{% endhint %}

### Images&#x20;

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.&#x20;

* Typically generated from a 3D model program&#x20;
* Make certain they're all the same dimensions&#x20;
* AVIF is recommended for better compression and faster loading&#x20;

{% hint style="success" %}
More images means a smoother rotation but longer load time.  Fewer images means larger rotation increments, but a faster load time.&#x20;
{% endhint %}

### JSON file&#x20;

Describes the contents

which lists the images in order from 0 to 360 degrees&#x20;

1. 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.&#x20;
2. Make certain your host supports CORS access.&#x20;
3. JSON files can be stored in Webflow assets if you like, and so can your images

Place your JSON file anywh

```json
{
  "images": [
    "https://files.sygnal.com/VansShoe/Filename_01.jpg",
    "https://files.sygnal.com/VansShoe/Filename_02.jpg",
    "https://files.sygnal.com/VansShoe/Filename_03.jpg",
    ...   
    "https://files.sygnal.com/VansShoe/Filename_35.jpg",
    "https://files.sygnal.com/VansShoe/Filename_36.jpg"
  ]
}
```

Relative paths;

```json
{
  "images": [
    "Filename_01.avif",
    "Filename_02.avif",
    "Filename_03.avif",
    ...   
    "Filename_35.avif",
    "Filename_36.avif"
  ]
}
```

{% hint style="success" %}
As of this writing, you can use these URLs for testing;

```
https://files.sygnal.com/VansShoe/rotate.json
https://files.sygnal.com/VansShoe/rotate-avif.json
```

{% endhint %}

## Future

* Mouse sensitivity setting&#x20;
* Looping controls. Ability to disable looping.&#x20;
* Automatic flipping at a specified speed. Only applies when the mouse is outside of the image&#x20;
* Messaging and indicators control&#x20;
* Loading animation choice&#x20;
* Media source&#x20;
  * Animated AVIF frames&#x20;
  * Video frames&#x20;
* Series of photos from 1 .. n
* User control&#x20;
  * Hover ( left = 0, right = n )&#x20;
  * Hover + mousewheel&#x20;
* Options
  * Loop
  * Reverse direction&#x20;

## Notes&#x20;

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.