@xata.io/react-flipbook Demos
🌈 A React library that enables anxiety-free low-frame animations. Sometimes, a bunch of animated GIFs playing around each other can feel a bit anxiety inducing. As an alternative, we'd like a way to have more control over frames in an image sequence.
This tool supports 3 modes:
- auto, where frames just play with a delay
- scrub, where you drag your finger/cursor across an image to play its frames
- controlled, where the frames can be controlled by some external element on the page
Below are demonstrations of these modes.
Auto
In this configuration, each frame automatically fades into another. Kind of like a carousel.
Scrub
In this configuration, dragging your cursor/finger across the flipbook changes frames. The end of the image's bounding box is the last frame, the beginning is the first.
Controlled
In this configuration, the control of which frame to show is owned by a parent component with state. The component yields its state to the parent in this case. Move the slider to control the animation.
Playground
Okaaaaaay now that you know the basics, here's where you can try it out for yourself and see how it feels with different configuration options.
Okay, this is cool. How do I use it?
This project is open source and freely available to all. Everything you need should be over at GitHub. As Beyonce says, if you like it, put a ⭐️ on it. 🙌🏾