Rive vs Lottie

Rive does all the things Lottie can do and more

Rive is a new format for real-time animation, with a dedicated editor and runtimes to play your content on all major platforms. Though we’re working to solve a bigger problem, Rive already does all the things Lottie can do and more.

It’s faster, smaller, and consumes less memory than Lottie. Rive does all this while also offering more interactive functionality and animation capabilities.

Rive is solving a bigger problem

Rive is solving a different problem compared to After Effects (Lottie’s editor) and other design tools. There’s a new category that has been missing; a design tool whose primary purpose is to build content that is interactive and meant to ship in products. Not just mock-ups, prototypes, or linear videos.

Most graphics nowadays run in real-time interactive software, yet our design tools are built to export static graphics or linear animations. There needs to be a tool that exports an interactive format that can run anywhere. Like png, jpg, or mp4, but interactive and non-linear.

Rive is that solution. And it’s already supported on most major platforms.

Rive is interactive

The Rive Editor lets you build interactive graphics. These graphics can react at any moment, changing their state based on user input, external data, or any other kind of trigger. Animation is a part of this puzzle, but not the entire story.

Lottie is purely about animation. It relies on After Effects as its editor.

Note: Rive is not trying to replace After Effects, which is designed for post-production and linear motion graphics – not interactivity.

Lottie takes the After Effects format and plays it in real time. It’s smaller than video, but it’s essentially just a vector gif. You can achieve some simple interactivity with Lottie, like advancing an animation when scrolling, but it has to all be handled with code. It’s impossible to experiment and iterate on wildly creative interactions in the After Effects editor, like the Rive example below.

Rive is an end-to-end pipeline

The Rive pipeline

Rive's editor, file format, and runtimes work seamlessly together. This end-to-end pipeline guarantees that what you build in Rive looks and behaves exactly the same in your websites, apps, and games.

With Rive, you design and animate in the Rive Editor. You export the Rive format. You run your files with the Rive Runtimes.

Note: you can still design and import external graphics in Rive, but you don’t need to. The types of graphics people create with Lottie can easily be designed entirely in Rive.

The Lottie pipeline

Lottie is the final step in a multi-platform pipeline. You’re probably doing your design work in Illustrator, Figma, or Sketch. You then animate in After Effects. Then you need the BodyMovin plugin to export a JSON representation of the After Effects format. You then play the JSON file with a Lottie library.

The tools aren’t specifically built for one another. What you create in After Effects isn’t guaranteed to look exactly the same in Lottie. Iteration isn’t easy. If the design or concept changes, you’re back to square one. Read more about why iteration is easy with Rive.

Rive files are smaller, faster, and take less memory.

The Rive format is built specifically to run in real time. It includes only the bare necessities to be as fast as possible. Lottie, on the other hand, relies on the After Effects format, which was never designed for runtime. This means that while Rive can do a lot more than Lottie, it’s also much smaller, faster, and takes less memory. In testing with our customers and helping them convert their Lottie files to Rive, we’ve found their Rive files tend to be multiple times smaller than Lottie. Performance is faster. Memory-constrained devices can still run Rive, while Lottie needed to be disabled.

Duolingo and Rive

Duolingo is one of Rive’s early adopters. They reached out to us last year to evaluate Rive. They needed something smaller and faster than Lottie, and Rive’s State Machine seemed perfect for the new interactive features they wanted to build. Read how Duolingo rebuilt all their characters with Rive to bring them to life with lip-syncing.

Kurt Hartfelder (Senior Animator at Duolingo and previously at JibJab) started by recreating one of Duolingo’s most recognizable animations.

In one of his first messages on our shared Slack channel, he shared that his Rive test was 15x smaller than Lottie.

“So this is my newbie attempt at recreating this ‘Walking Duo’ loading animation in Rive. This particular animation is quite old (3 years) but still used every day in the app. It's about 240kb in its current JSON form, but this new Rive version (which is far from complete, but a decent start) is 16kb! Nice.”

Another Duolingo team member commented on the performance of their Rive assets vs Lottie, “the performance itself is pretty amazing, it stays well under 16ms on debug builds (Lottie struggles quite a bit for the same animations).”

Real numbers: converting a Lottie file to Rive

We recreated the Lottie file below in Rive. It looks exactly the same, but the file size and performance are better with Rive.

Rive web example

• File size: 18 KB (no compression)

• GPU Memory: 2.6 MB

• JS heap: 7.3 MB

• CPU: 31.8%

Lottie web example

• File size: 181.7 KB (no compression)

• GPU Memory: 149-190 MB

• JS heap: 16.9 MB

• CPU: 91.8%

👉 View all our findings with accompanying screenshots.

👉 Try the two examples out for yourself.

Rive is multiplayer

Rive has a modern collaborative editor. You can create a shared space to store and organize files, making it easy to design, animate, and iterate together. Rive makes it easy for designers and developers to work together.

Rive is not trying to replace After Effects

After Effects is a post-production powerhouse and offers a gazillion effects. Rive is not trying to compete with After Effects. They’re different tools for different jobs. If you’re doing any post-production work for film or TV, you should use After Effects. But if you’re building interactive graphics for products, apps, websites, or games, we think you’ll be thrilled with Rive.

Converting Lottie to Rive

Update 1/5/23: we've added experimental support for importing Lottie into Rive.

We're working on a way to convert Lottie files to Rive, but it's not a straightforward process. The After Effects format was never built for runtime and some concepts don't translate. In the meantime, we are offering services to businesses that need to rebuild their Lottie files in Rive.

A creative tool for the interactive era

Though we're working to solve a bigger problem, Rive is already a complete replacement for Lottie.

Rive is a new end-to-end pipeline with a dedicated editor and a format built for interactivity. It finally brings our design tools into the interactive era.

And it’s already supported on most major platforms, including the web, iOS, macOS, Android, Windows, Flutter, React, React Native, C++, game engines (like Defold), and platform-specific OSes (like Tizen and Fuchsia).

Rive is currently in beta, with a lot more to come. Join us on at the Rive Community to share any feedback.