Guides · · Maxwell Prehoda
Rive vs Lottie: 10 Real Projects That Show When Each One Wins
Lottie plays an animation a designer already finished, usually in After Effects. Rive runs an animation that keeps deciding what to do: its files carry state machines and data bindings, so the same file reacts to taps, app state and live data. Pick Rive when the animation has to respond while it plays. Pick Lottie, now best shipped as dotLottie, when it is a linear piece from an After Effects team that has to run on iOS, Android and the web. And if it is a loader or a button state on a website, consider that neither may be needed: CSS does it with no runtime at all.
The comparisons that rank for this mostly argue in the abstract. Below are ten real projects and tests, each linked to the team's own write-up, the vendor's case study or an independent benchmark, so you can see which tool won and why. Vendor case studies are vendor marketing; we say whose numbers are whose.
1. Duolingo's World Characters: Best for characters that lip-sync to speech
Platform: Rive state machine in the Duolingo iOS and Android apps
Duolingo's engineering blog describes how its ten World Characters talk. Each character has general pose states plus separate mouth shapes (visemes) that run in parallel with the body, all wired into one Rive state machine. The app maps speech sounds to mouth shapes using timing data from its speech models, drives the state machine in sync with the audio, then moves to a reaction depending on whether the learner's answer was right. The whole thing ships as a single runtime file.
This is the clearest case for Rive. A Lottie version would need a separate file or segment for every mouth shape and pose, and app code to stitch them together in real time.
Our Voice Mode Speaking Dots below is a pure-CSS take on a speaking indicator. It loops a canned pattern; it cannot follow real audio the way a Rive state machine can.
Watch out for: Duolingo's post is from November 2022 and describes their pipeline, not a template. Expect to invest real design time in state machine logic before you see the payoff.
2. Duolingo, again: thousands of Lottie files: Best for reactions, icons and walkthroughs at scale
Platform: Lottie in the Duolingo app and website
The same company appears on the other side. LottieFiles' Duolingo case study says the team has integrated thousands of Lottie files for reactions, in-app animations, animated icons, micro-interactions and walkthroughs, and tests them with LottieFiles' preview and test apps before release.
That is the honest answer to Rive vs Lottie for many teams: both. Interactive characters go to Rive; the long tail of short, linear animations stays in Lottie, where a big library and an established After Effects workflow already exist.
Watch out for: This is LottieFiles' own case study, so it is a vendor telling the story. The useful part is the split by job, not the engagement claims.
3. Spotify Wrapped 2025: Best for data-driven stories built from each user's stats
Platform: Rive, driven by real user data
Rive says it powered the motion layer of Spotify Wrapped 2025. The team prototyped with dummy data, built the final animation in Rive, then engineering drove it with each user's real data, with the system handling varying text lengths, device constraints, localization and late changes. The Top Artist Sprint, showing how a listener's top artists shifted month by month, is their example of data as interaction.
Lottie can swap text and colors, but motion that depends on the data itself, like bars that grow to your numbers or names that change length, is what Rive's data binding is for.
The clip below is our own Year in Review Story Studio style prompt, a fictional listener's year on a 120 BPM beat. It is a rendered video, so its numbers are fixed, which is exactly the limitation data binding removes.
Watch out for: Rive's post does not say how many animations were built or which platforms ran them, so read it as a direction, not a spec. Data-bound animation also needs engineering time to wire up the bindings.
4. LinkedIn's Year in Review, built by BUCK: Best for personalized experiences with many variants
Platform: Rive data binding and state machines, mobile
Studio BUCK built LinkedIn's first Year in Review entirely in Rive: a full-screen animated recap of each member's 2025 highlights. Each user's data feeds the animation through Rive data binding, state machines decide what plays when, and the experience covers 207,360 possible user journeys across data, language (English, Spanish, Portuguese) and device, including low-end Android phones.
Pre-rendering that many variants as video or as separate Lottie files is not realistic. Assembling them at runtime from one file is the Rive argument in one number.
Watch out for: Projects at this scale come from studios with Rive specialists. If your team has never shipped a state machine, start with one interactive component, not a campaign.
5. Intercom's switch from Lottie to Rive: Best for product marketing animations that ship weekly
Platform: Rive, replacing an After Effects to Lottie pipeline
Intercom's Creative Studio first used Lottie for its Fin AI Copilot launch, then moved. Their reasons were workflow friction in After Effects pre-comps, softness in some renders, and Lottie files that were heavy and crumbled in Safari. After the switch, Rive reports process time fell to about 20 percent of the Lottie timeline and file sizes roughly halved: the Copilot hero went from 1.49 MB to 831 KB, and an Insights and Reporting animation from 880 KB to 441 KB.
This is the case to read if your pain is the pipeline rather than interactivity: the gain came from authoring in the same tool that renders the result.
Watch out for: These are figures from Rive's own case study about a team that had specific Safari problems. Measure your own files before assuming the same halving.
7. Lordicon's animated icons: Best for drop-in animated icons in many formats
Platform: Lottie plus GIF, MP4, SVG, WebP and more; free and premium icons
Lordicon is an animated icon library of more than 48,100 icons, about 9,700 of them free, with animation states such as intro, hover, morph and loop. It exports Lottie alongside GIF, MP4, SVG, PNG, WebP, APNG and After Effects formats.
Icon libraries show why Lottie's ecosystem matters: there are huge catalogs of ready-made Lottie files to pick from, and LottieFiles alone says it hosts over 800,000 free and premium animations. If you need forty icons by Friday, that is a real advantage over building each one in Rive.
Our Sun to Moon Icon Hover below is a pure-CSS take on an animated icon state, for when you only need one or two and want no player.
Watch out for: Playing Lottie icons on the web means loading a Lottie player. For two or three icons on a marketing page, a CSS or SVG version is lighter.
8. The After Effects handoff: Best for motion designers who already work in After Effects
Platform: Bodymovin for After Effects plus lottie-web; MIT
Lottie started at Airbnb as a way to ship After Effects animations: the Bodymovin extension exports a composition as JSON, and lottie-web (32,000+ GitHub stars, MIT licensed) renders it with an SVG, canvas or HTML renderer, with sibling libraries for Android, iOS, React Native and Windows. For a team whose motion designers live in After Effects, nothing beats exporting from the tool they already use.
Rive cannot import an After Effects file; it is a separate editor. Choosing Rive means choosing to animate in Rive.
Watch out for: Not every After Effects feature survives export, and support differs between platform players, because the classic players use each platform's own renderer. Test each animation on every target, especially effects like blur and shadows.
9. Callstack's low-end Android test: Best for deciding on performance for React Native apps
Platform: Independent benchmark, React Native on Android
Callstack, a React Native consultancy, built the same animation in both formats and profiled it on a Sony Xperia Z3, an old low-end phone. Lottie ran at about 17 fps and Rive at about 60. Rive used roughly half the Java and native memory but more graphics memory, so its total memory was higher (about 276 MB vs 246 MB). The author concluded the smoothness matters more than the extra memory on most devices.
It is one of the few comparisons not written by either vendor, which is why it is still cited.
Watch out for: It is from January 2023, one animation, one old device, and both runtimes have changed since. Rive's own comparison also warns that on iOS, Lottie's work can show up in Apple's render server rather than your app's process, so profile both together. Re-run the test with your own animation before deciding.
10. dotLottie, Lottie's answer: Best for teams staying with Lottie that need interactivity
Platform: dotLottie players for web, React, iOS, Android; Lottie Creator
The comparison is not frozen at plain JSON. dotLottie is a compressed container that holds several animations with shared assets, themes for dark mode and brand colors, and state machines that respond to clicks, hover and completion events. LottieFiles says its optimized formats can cut file sizes by up to 80 percent, and Lottie Creator, its web editor, has Motion Copilot for prompting keyframes and a prompt-to-state-machine feature.
If you have a large Lottie library and only a few pieces need to react to input, this closes much of the gap without a migration.
Watch out for: Lottie state machines are younger than Rive's and only work in the dotLottie players. Data binding of the kind Spotify and LinkedIn used is still Rive's territory.
11. Our CSS AI and UI states: Best for web loaders and status states with no player at all
Platform: Motions directory, free; HTML plus CSS Ours
A lot of Rive and Lottie files on websites are status indicators: thinking, loading, done. On the web those need no runtime. Our AI Animations directory has 120 agent and chat states in pure CSS, from thinking shimmers to tool-call cards, and Loaders has hundreds more. Each has a reduced-motion guard and custom properties for color and size.
The Agent Task Complete below draws a ring, fills it and strokes in a check with a small burst, the kind of success moment teams often ship as a Lottie file.
Watch out for: CSS does not run inside native iOS or Android views. For native apps, Rive or Lottie is still the right container.
12. Our Animation Studio: Best for scenes for the web without learning either editor
Platform: Motions Animation Studio, paid; exports HTML, React, MP4, GIF Ours
If neither editor appeals and your target is a web page or a video, the Animation Studio takes a description instead. Claude draws the art, choreographs the motion and checks every frame; you scrub the timeline, tune eases and springs, box any part to change it and export to HTML, React, MP4 or GIF.
Watch out for: It does not export .riv or Lottie, and its output does not take live data the way Rive data binding does. For native apps or data-bound stories, use Rive.
How to choose between Rive and Lottie
Does it react while it plays?
If the animation responds to taps, hover, audio or data while it is running, like Duolingo's talking characters or a Wrapped-style recap, choose Rive. If it plays start to finish, or picks from a few fixed segments, Lottie (as dotLottie) is simpler. If it is a web UI state, try CSS first; our Lottie alternatives guide covers the lighter options.
Who makes it, and in what?
A team of After Effects animators will ship faster with Lottie, because Bodymovin exports from the tool they know. A team willing to learn a new editor gets interactivity, a single file and, in Intercom's experience, a faster pipeline with Rive. If nobody on the team animates, compare the browser tools in our best UI animation tools guide.
What does it cost to ship?
Both runtimes are free: lottie-web is MIT, and Rive's runtimes are MIT with no runtime fees. The editors differ. Rive's free plan adds a splash screen to exports, so shipping needs a paid seat, priced per seat per month. LottieFiles has a free plan for previewing and sharing, with Lottie Creator exports limited until you pay per seat. Then weigh file size and frame rate on your own lowest-end device, not the vendor's.
Prototype the same animation in both
Pick one animation your product actually needs, ideally the one with the most states. Build it once in Rive and once as a Lottie file, drop both into a test page or app screen, and compare file size, frame rate on your oldest phone, and how long the next change takes. That afternoon will tell you more than any comparison table.
For the web-only pieces, a CSS version is worth adding to the test. Start from the directory or describe it to the creator.
Make a status animation for an AI assistant in pure CSS with three states: idle (a slow 3s breathing pulse), thinking (a light band sweeping across the label every 1.2s) and done (a ring that draws in 400ms, then a check that strokes in 250ms with a small spring overshoot). Switch states with a data-state attribute and transition between them over 200ms. Use one accent color from a custom property. Under prefers-reduced-motion, replace the pulse and sweep with a static label and fade the check in.
Common questions
Is Rive better than Lottie?
For interactive, state-driven or data-driven animation, yes in most cases: state machines and data binding are built into the file. For linear animations from an After Effects team that need to run on every platform, Lottie is often less work and has a much bigger library of ready-made files.
Are Rive files smaller than Lottie?
Often. Rive's own comparison claims .riv files are commonly 10 to 15 times smaller than equivalent Lottie JSON, and Intercom roughly halved its file sizes after switching. Those are vendor-published numbers, and dotLottie compression narrows the gap, so compare your own files.
Is Rive free?
The Rive runtimes are MIT open source with no runtime fees. The editor has a free plan, but its exports include a Rive splash screen; removing it requires a paid seat.
Can Rive import Lottie or After Effects files?
Not After Effects compositions. Rive is its own editor, so you rebuild the animation there. Rive's site lists imports from Figma and Flash, not After Effects.
Should I use Rive, Lottie or CSS for a website loader?
CSS. A loader is a simple loop, and CSS draws it with no player download and keeps it smooth while the page is busy. Our Loaders directory has hundreds of copy-paste examples.
Sources
- Duolingo blog: World Character visemes
- LottieFiles: Duolingo case study
- LottieFiles: Uber case study
- Rive: Spotify Wrapped 2025
- Rive: LinkedIn Year in Review by BUCK
- Rive: Intercom case study
- Rive: Rive as a Lottie alternative
- Callstack: Lottie vs Rive on mobile
- airbnb/lottie-web on GitHub
- Lordicon
- Rive pricing
- LottieFiles pricing