Rive vs Lottie
Rive vs Lottie: which should ship in your product?
Lottie is the ubiquitous JSON animation format from After Effects. Rive is an interactive runtime with state machines. Here's when each is the right call.
Updated November 2026 · Written by Shaheer Malik, who ships in both
Quick answer
Lottie is a lightweight JSON format for playing back After Effects animations almost anywhere — ideal for decorative loops and icons. Rive is an interactive runtime whose state machines react to input, scroll and data, with smaller files and GPU performance. Choose Lottie for animations that play; choose Rive for animations that respond to the user.
Lottie made vector animation easy to ship: animate in After Effects, export JSON with the Bodymovin/LottieFiles plugin, drop it into any platform. It's everywhere because it's simple and the format is open. But Lottie plays back — it doesn't react.
Rive was built the other way around: a dedicated editor plus a runtime where animations are state machines that respond to input, scroll, data and app state. The trade is a steeper tool and a less universal pipeline in exchange for genuine interactivity and smaller, faster files.
| Dimension | ||
|---|---|---|
| Interactivity | State machines — reacts to input & data | Playback only (basic interactivity via code) |
| Authoring tool | Dedicated Rive editor | After Effects + plugin (or LottieFiles tools) |
| File size | Very small vector .riv | Small JSON, but grows with complexity |
| Runtime performance | GPU-accelerated, up to ~120fps | Good; can struggle with heavy effects |
| Ecosystem & ubiquity | Growing fast | Huge — supported almost everywhere |
| Designer onboarding | Learn a new editor + state logic | Reuse existing After Effects skills |
| Editable after export | Fully, in Rive | Re-export from After Effects |
| Best for | Interactive UI, mascots, game UI | Decorative loops, icons, onboarding clips |
Choose Rive if…
- The animation needs to react to taps, scroll, state or data
- You want the smallest possible asset that stays crisp
- You're building loaders, toggles, mascots or game UI
- You want to tweak motion without round-tripping to After Effects
Choose Lottie if…
- Your team already animates in After Effects
- You need a decorative loop or icon that just plays
- You want the widest possible platform support out of the box
- Simplicity and a familiar pipeline matter more than interactivity
The honest verdict
If the animation just needs to play, Lottie is the path of least resistance — your team's After Effects skills transfer directly and the format runs almost everywhere. For decorative loops, empty states and onboarding clips, it's still a great default.
If the animation needs to react — a loader tied to real progress, a toggle that animates between states, a character that responds to input — Rive is the better tool, with smaller files and GPU performance on top. The rule of thumb: Lottie for motion that plays, Rive for motion that responds.
Need it designed and built? See motion design, with Rive, Lottie and interface motion at a fixed price.
Common questions
Rive vs Lottie, answered
Usually yes. Rive's .riv is a compact binary vector format, and it tends to stay smaller than an equivalent Lottie JSON — especially as complexity grows. Both are far lighter than video.
Lightly. You can trigger segments, hover and click states via the player API, but there's no built-in visual state machine. Anything beyond simple triggers means writing code. Rive makes that interactivity native and visual.
No. Rive has its own editor, so you don't need After Effects at all. Lottie, by contrast, is typically authored in After Effects and exported as JSON.
Rive generally, thanks to GPU-accelerated rendering and small vector files. Lottie performs well for simple animations but can drop frames with heavy masks, effects or large JSON.
Work with me
Want it built, not just compared?
I ship production sites and product UI in Rive and Lottie — design and code under one roof.
- Fixed price from $700 — no hourly surprises
- Design, build and deploy handled end to end
- 75+ projects shipped · 4.93 avg rating
More comparisons