For apps and website development teams that use Rive, previewing .riv files, especially those with state machines, can be a challenge. Rive's web preview lacks support for testing state machines, making it hard for developers to interact with triggers, transitions, and complex animations in the browser.
For this reason, rive.rip was created. It’s a web-based tool that allows developers to:
- Upload .riv files and preview both animations and state machine inputs.
- Interact with state machines in real time by triggering transitions and behaviors directly in the browser.
With rive.rip, developers don't need to rely on the desktop app or constant communication with designers. It simplifies testing and accelerates the integration of animated assets into apps and websites.
Usage Tutorial
1. Upload your .riv file
Visit rive.rip and drag-and-drop your .riv file into the interface or click the Upload button to browse your local files. Once uploaded, the animations and state machine inputs will be automatically loaded.
2. Explore the state machine inputs
After uploading your file, you'll see a detailed breakdown of both the individual animations and state machine inputs, including triggers, booleans, and numbers. These inputs allow you to interact with the state machine directly in the browser. Experiment with different input values to trigger transitions and test behaviors in real-time.
3. Test animations and transitions
Use the real-time preview to play through animations and observe transitions based on the state machine logic. You can easily fire triggers or toggle boolean values to see how the animations react.
4. Adjust layout with fit and alignment options
Rive.rip also gives you control over the visual layout of your animation. You can play with the fit (e.g., fill, contain, cover, etc.) and alignment (e.g., center, top-left, bottom-right) options to see how the animation fits into different spaces. This is especially useful when considering how your animations will appear in your app or website’s UI.
Try it out for yourself at rive.rip! If you find this website, consider giving a star of its GitHub repo!
Top comments (0)