This is Part 1 of our Rive series. Start here!

When we started exploring interactive animations for our app, we initially looked at Lottie as the defacto solution for simple mobile animations. However, it quickly became clear that it would not be enough for the experience we wanted to build.

The resulting files were larger than desired and interactivity was limited to basic triggers. At the time, Lottie did not yet support state machines, which made it difficult to build more complex, responsive behaviors. With this in mind, we turned to a newer framework: Rive.

Compared to Lottie, Rive proved to be much better suited for interactive animations in our use case. It provides built-in support for state machines, allowing us to define richer animation logic. It also supports data driven interactivity, enabling the app to pass strings, numbers, booleans, and even images to the animation in real time. As an added benefit, Rive is also more lightweight than Lottie so we can keep our app size smaller and more competitive and we would be able to reuse much of our animations outside our apps, on our website and other use cases.

Rive vs Compose

As we started integrating Rive into our app, we realized that the decision was not simply “Rive or not Rive”, but rather Rive vs Compose. Both frameworks can be used to create motion graphics and animations, but they serve different purposes and come with different trade-offs.

Stability and Fallbacks

One of our first concerns when integrating Rive was reliability: what happens if a Rive animation fails to load? Early adopters had cited load failure percentages that gave us some concern. We also wanted to ensure our offline experience was always a good experience for remote-asset use cases. To account for these requirements, we introduced a simple fallback strategy. For every Rive integration, we also provide an SVG alternative that the app displays as a loading state and first frame. This ensures that the experience remains functional even if something goes wrong or takes a little time to load.

When Rive is not the Right Tool

One of the most important lessons we learned early on is that not everything needs to be built in Rive.

There were cases in which we instinctively reached for Rive, only to realize that the same effect could be implemented more simply using Compose. An example was an animation of colored light bulbs. Our first instinct was to build it in Rive, but the behavior was simple enough that Compose could handle it just as well, with less complexity.

Being Aware of Bias

Choosing between Rive and Compose is not always purely technical. It is also influenced by familiarity with the different tools. If you are more comfortable with Compose, you will naturally try to solve problems using Compose. If you are more comfortable using Rive, you will tend to favor it instead. There’s nothing inherently wrong with this, but it is important to be aware of this bias. The key is to remain flexible and willing to switch approaches when a better solution becomes apparent.

We are still learning how to navigate this balance ourselves. Sometimes there is no right or wrong answer and it’s just a matter of making a decision.

Practical Guidelines

Based on our experience so far (and our use case), a few simple guidelines have emerged:

• If the animation is a shared element transition or off-line essential motion, use Compose.
• If the animation is simple motion (rotation, translation, color changes,...), use Compose.
• If the animation needs to be fluid or interactive, such as character rigged animations, use Rive.
• If the animation is going to become more complex over time, use Rive.
• If the animation needs to be reused outside of the app (for example, on a website), use Rive.

Closing Thoughts

Rive has proven to be a powerful tool for building interactive animations, but it is not always the right tool for every situation. Understanding when to use Rive, and when not to, is just as important as knowing how to use it.

In the next post, I will dive deeper into the practical lessons learned while building animations with Rive.