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.
Top comments (0)