Rive: Animate Web UIs with State Machines Rive.app is an online tool that facilitates the creation of animations. What makes it special is that it uses state machines. I came across Rive.app a few months ago and I was seduced by its simplicity of use and the possibility to use state machines to describe animation steps. I usually use Lottie (an open-source player for Adobe After Effects animations) but I find it a bit limited. And seeing that Rive.app allows me to manage state machines, I decided to give it a try. Rive has just published an article explaining the differences between Lottie and Rive. The main points are the following:
- Rive allows managing machine-states
- Everything is centralized in a single file
- The file size is smaller
- The implementation in the code is simpler Rive is both a standalone editor app and a set of player runtimes for most platforms (web, iOs, Android, React.js, Flutter, etc.). If you’re old enough, you can think of Rive as a successor to Flash. Rive is a paid app (subscription-based) with a generous free tier. I’m not going to explain in detail how to create a design, there is already a tutorial on the Rive.app website that explains very well how to do it. But to keep it simple. The interface is divided into two parts. The first one is the design creation part. You can add objects, shapes, images, animations, etc. By putting all this together, you can get some pretty cool results. The second part of the interface focuses on animation. This is where the notions of motion design come in. This interface lets me move the elements of my design to different positions for each frame. I can also add transitions between frames. This will create an animation. Once I have created several animations, I can orchestrate them via a state machine. According to Rive, State machines are a visual way of linking animations together and defining the logic that governs transitions. They let motion designers organize complex animations and make them...