How to Preview Rive Files Online

albert — Thu, 12 Sep 2024 17:46:57 +0000

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!

Solving Developer-Designer Friction in Rive Animations with Rive.rip

albert — Thu, 12 Sep 2024 10:15:00 +0000

Background

At Spellr, a digital tutor for kids learning reading and writing, we needed a tool to streamline communication between our designers and developers when using Rive's animation platform, especially for state machines.

Rive is fantastic, but also difficult to learn for one core reason: the state machine. Rive describes it's state machine as "a visual way to connect animations together and define the logic that drives the transitions. They allow you to build interactive motion graphics that are ready to be implemented in your product, app, game, or website."

Dilemmas with State Machine

Rive’s state machine links animations together but can be complex for designers to handle alone, leading to frequent communication with developers. Consider a simple number counter animation:

Digits Example

Consider this: there is a number counter and we want to be able to handle the transition between different digits. What should be the API (the state machine inputs) that the designer should make available to the developer?

Two choices immediately come to mind

Expose a number input and the application code can just set it to the desired value. The developer can set any value, but the designer must create 90 transitions (each number to 9 other numbers).
Expose increment and decrement trigger inputs that the application code can repeatedly fire to reach a desired value. Easier for the designer (20 transitions b/c an increment and decrement for each number), but adds complexity for the developer.

At Spellr, our philosophy is clear: what’s easiest for the designer takes priority. Developers can handle complex code, while animating multiple transitions is tedious.

Problem with Rive's Web Preview

The developer then needs to learn how the state machine works, and the best way is to preview the .riv file they received and play hands on with the State Machine inputs. However, Rive’s web preview doesn’t support state machines (only individual animation playback), leaving developers unable to test transitions or interactions without the desktop app. This creates delays, miscommunication, and friction.

Enter rive.rip

To solve this problem, we built rive.rip, an alternative, web-based tool allows developers to:

Upload .riv files and view a detailed breakdown of the state machine inputs (triggers, booleans, numbers).
Interact with the state machine in real time, triggering transitions and inputs to see exactly how the animations behave.

This tool gives developers independence, reducing the need for back-and-forth with designers, speeding up the integration process.

Why We Built rive.rip

At Spellr, interactive animations are core to our app, engaging kids and enhancing learning. rive.rip allows designers and developers to work seamlessly without stepping on each other’s toes.

How We Built It

We built rive.rip using Next.js for the frontend, and we relied on ShadCN components to create a clean and intuitive UI. It uses Rive React and the full source code can be found at the public GitHub repo (give it a star!).

We hope rive.rip can be as useful to you as it has been to us, which is why we released it to the public at rive.rip. If you’re working with Rive and facing similar challenges, feel free to give it a try! We’re excited to hear your feedback and learn how we can make it even better.

DEV Community: albert