Rive vs Lottie for Interactive UI Animation
Rive is the better choice when an animation has to react: hover, press, drag, game states, live data. Lottie is the better choice when you need a reliable, pre-made animation played back the same way every time, especially if your motion designer already works in After Effects. I built Stitch, a whole Halloween game, inside one Rive file, which tells you where I land for interactive work.
Use Rive for interactive, stateful motion inside the product. Use Lottie for linear animations exported from After Effects, like loaders, illustrations and onboarding loops.
Rive vs Lottie: side by side
| Rive | Lottie | |
|---|---|---|
| What it is | Design tool plus runtime with state machines | JSON animation format played by a player |
| Made in | The Rive editor (or the Rive CLI) | After Effects with Bodymovin, or LottieFiles tools |
| Interactivity | Built in: state machines, inputs, listeners | Mostly playback control from code |
| Pointer events | Listeners for hover, click, drag | Handled in your app code |
| Runtimes | MIT open-source, no runtime fees | lottie-web is MIT; players on every platform |
| File format | .riv binary | .json or .lottie (dotLottie) |
| Free plan | Exports with a splash screen | Free previews, testing and sharing |
| Paid entry | Cadet $9 per seat/mo | LottieFiles Individual $19.99/mo billed yearly |
| Best for | Buttons, characters, games, data-driven UI | Loaders, illustrations, marketing loops |
| Team fit | Designers who like logic | Teams with After Effects motion designers |
Where Rive wins
A Rive state machine connects animations with logic, and listeners react to pointer events on a target. That means a toggle, a mascot or a reward screen can respond without a developer rebuilding the motion in code. The runtimes are MIT open source with no runtime fees, across web, iOS, Android, Flutter, React Native, Unity and more.
For Stitch I went further: one Rive file holds the world, a scripted hand and the game logic, using Luau scripting, WGSL shaders and data binding through the Rive CLI.
Where Lottie wins
Lottie is the safe, boring choice in a good way. A motion designer animates in After Effects, exports JSON with Bodymovin, and a player renders it on every platform. If your team already has that pipeline, there is no reason to rebuild it.
The limits show up when the animation needs to know things: which state the user is in, where the cursor is, what the data says. You end up writing that glue in app code.
Performance, files and handoff
Both formats are vector-first and small compared with video, but real performance depends on the file: number of shapes, masks, effects and how often it runs. Test the actual animation on the slowest device your users have before deciding based on general claims.
Handoff is where the difference becomes practical. With Lottie, a developer receives a JSON or dotLottie file and controls play, pause, speed and loops. Anything smarter, like reacting to a hover or switching to an error state, is logic they write. With Rive, a developer loads the .riv file and sets inputs the designer defined, so the state logic travels with the file.
Budget matters too. Rive's free plan lets you try everything, but exports carry a splash screen; Cadet at $9 per seat a month removes it. LottieFiles' paid plans start at $19.99 per user a month billed yearly, while the open-source players are free to use.
Which one should you pick?
- The animation reacts to the user or to data
- You want designers to own the logic
- You are building a game-like or character moment
- You want one small runtime file
- The animation plays the same way every time
- Your motion designer lives in After Effects
- You need a library of ready-made animations
- Developers only need play, pause and loop
How I use them
My interactive pieces lean on Rive or on code. Stitch: The Midnight Brew is the clearest example: a playable game built with the Rive CLI. For linear motion inside native apps I have also used alpha video, as in LevelUp, when a rendered effect looked better than vector shapes.
If you are deciding today, ask one question: does this animation need to respond? If yes, Rive. If no, Lottie is simpler.
FAQ
Is Rive better than Lottie?
For interactive animation, yes, because state machines and listeners are built in. For simple linear playback from After Effects, Lottie is simpler and widely supported.
Is Rive free?
The editor has a free plan, but exports include a splash screen. Paid plans start at $9 per seat per month. The runtimes are MIT open source with no runtime fees.
Can I convert Lottie to Rive?
Plan to rebuild it. Even when artwork carries over, the interactivity has to be built in Rive's state machine, so treat it as a redesign, not a conversion.
Which is lighter, Rive or Lottie?
It depends on the animation. Both formats are compact for vector work; test your real file on the target device rather than trusting general claims.
The bottom line
If the motion needs to know anything about the user or the data, choose Rive. If it only needs to play well everywhere, Lottie is the simpler, well-trodden path.
Sources
Need a product designer or design engineer for your product? I work remotely with teams worldwide, from research to shipped code.