Rive vs Lottie, the short answer: Pick Lottie for linear animations made in After Effects or Lottie Creator, like loaders, icons, and marketing moments, especially if your team already works that way. Pick Rive when graphics need to react to people or live data, adapt to any screen, or run inside apps and game engines from one file that holds the design, motion, and logic. You can also use both.

Rive is the interactive engine for games, apps, and UI. Make the whole thing in Rive, or add Rive to the products you already have. We're on a mission to make hard-coded graphics history with a new general-purpose graphics format for all software and UI, and animation is one part of the puzzle.

One Rive file holds the design, motion, and logic, and that file ships. Your coding agent builds with the Rive CLI (Claude Code, Codex, Cursor), and designers and animators shape the same file by hand in the Rive Editor, going back and forth as often as you like. The custom-built Rive Renderer draws it the same way in the Editor and in your product.

If you're looking for a Lottie alternative, this guide compares Rive and Lottie across key dimensions to help you choose the right tool for each project.

Primary use cases

Features breakdown

Interactivity and state machines

Rive: The State Machine lets designers and animators build interactive graphics that respond to user input or data in real time. The logic lives in the Rive file, so developers and agents load the file and connect it to the app, with no need to rebuild the interaction in code.

Lottie: Lottie supports scroll-based and triggered playback. dotLottie files can now include state machines for clicks, hovers, and other triggers, built in Lottie Creator or in code. With plain Lottie JSON, interactivity is coded by hand in your app.

Responsiveness

Rive: Layouts and Scrolling let you design graphics that adapt to different screen sizes and orientations, from small UI pieces to full-screen, responsive designs.

Lottie: Lottie animations scale as vectors, but there's no layout system, so content doesn't reflow to fit a new screen shape. Teams often export separate versions for different sizes.

Dynamic data integration

Rive: Data Binding connects graphics to live data, so almost everything in a Rive graphic can update at runtime, including color, size, text, images, lists, and components. Data Binding works in every Rive runtime.

Lottie: dotLottie supports theming through Lottie slots, so an app can change colors, text, and some other properties at runtime. Bigger changes to content or structure mean editing the animation or writing code.

Blurs and shadows

Rive: Vector Feathering creates soft glows and shadows on vector fills and strokes without the cost of a traditional blur. It needs the Rive Renderer (on the web, the WebGL2 package).

Lottie: In the Airbnb players, drop shadows work on Android and iOS, and Gaussian blur works on Android. These raster effects add rendering cost, especially on mobile.

Masking

Rive: Supports clipping, including inverse clipping. Alpha masking is in development.

Lottie: Includes both clipping and alpha masking.

Scripting

Rive: Scripting is built into the Rive file. Write scripts in AnimaScript (the newer language, with TypeScript syntax, compiled to WebAssembly) or Luau for logic, procedural motion, custom drawing, layouts, converters, path effects, and transitions, and they run in Rive's runtimes on web, mobile, desktop, and game engines.

Lottie: Supports After Effects expressions (JavaScript) in lottie-web for procedural motion. The Airbnb Android and iOS players don't support expressions.

Technical performance

File size and rendering

Rive: A Rive file uses a compact binary format designed for runtime, and Rive files are often 10 to 15 times smaller than equivalent Lottie JSON files. Example: a 240KB Lottie animation was recreated in Rive at 16KB. CARS24 cut animation file sizes by up to 90% (from about 150KB to about 15KB) after switching to Rive.

Lottie: A Lottie file is JSON, which is easy to read and edit. The dotLottie (.lottie) format zips the JSON and its assets to cut file size.

GPU-accelerated rendering

Rive: The Rive Renderer draws on the GPU, using Metal on Apple platforms, OpenGL on Android (with Vulkan as an option in some runtimes), and WebGL2 on the web. It's open source, and it's the same renderer the Rive Editor uses.

Lottie: The Airbnb players use each platform's renderer, like Core Animation on iOS and SVG or Canvas on the web, so supported features differ from platform to platform. The newer dotLottie players share one rendering core (ThorVG) for more consistent output.

iOS memory usage and CPU performance

Rive: Rive draws with Metal directly, so its CPU and memory use shows up in your app's own process. Out-of-band assets cut memory use by letting you reuse raster images, fonts, and audio across several Rive files.

Note: When comparing total system memory usage on iOS, measure your app and the render server together. Rive's Metal allocations appear in your app's process, which can make Rive look higher in app-only profiling.

Lottie: Relies on Core Animation to offload some work to the Apple render server, which doesn’t appear in the app’s memory profile. CPU usage often shows as 0% in profiling tools because it offloads animation playback to the render server, a separate system process. This means Lottie’s CPU usage doesn’t appear in the app process itself, even though it’s still consuming resources.

For a fair comparison, test on the devices you ship to. To see which Rive features each runtime supports, check the feature support table.

Workflow and collaboration

End-to-end pipeline

Rive: One Rive file holds the design, motion, and logic. Your coding agent builds and edits it with the Rive CLI, and designers and animators shape it by hand in the Rive Editor with timelines, the State Machine, Data Binding, and bones and constraints. Each side picks up the other's changes, and the file you edit is the file that ships.

Lottie: The classic workflow uses several tools: Illustrator or Figma for design, After Effects for animation, and the Bodymovin plugin to export JSON. Changes often mean going back through those steps. LottieFiles' Lottie Creator now lets teams make and edit Lottie files in the browser.

Collaboration

Rive: Designers, animators, developers, and agents work on the same file. The Rive Editor runs in the browser or as a desktop app, and you can share a link to a live, interactive preview.

Lottie: LottieFiles offers a platform for hosting, previewing, and sharing Lottie files. Outside that platform, teams share files through their usual tools.

Flexibility and future-proofing

Asset management

Rive: Libraries let teams publish components, view models, and scripts once and reuse them across files, with version history (Voyager and Enterprise plans). Fonts, images, and audio can be swapped at runtime.

Lottie: Images can be embedded in the JSON or loaded as separate files, and dotLottie bundles animations, images, and themes into one file.

Platform support

Rive: Open-source runtimes play the same Rive file on web, iOS, macOS, Android, Flutter, React, React Native, Unity, Unreal, Defold, and C++, and Rive also runs on consoles, smart TVs, and cars. What you see in the Editor is what you get in Rive’s runtimes. We build the runtimes and the renderer ourselves, so fixes don't depend on third parties. The runtimes are MIT licensed, with no royalties or runtime fees.

Lottie: Official dotLottie players cover the web (including React, Vue, and Svelte), iOS, Android, React Native, Flutter, and C/C++. They don't include game engines like Unity or Unreal.

Customer examples

Rive: Duolingo adopted Rive to enhance its interactive characters, achieving a 15x reduction in file size while improving performance and interactivity. Teams at Spotify, Disney, and Riot Games also ship with Rive, and products built with Rive reach over 2 billion users.

Case studies:

Lottie: Widely used for linear UI and marketing animations. Lottie started at Airbnb.

Choosing the right tool

Pick Lottie for linear animations made in After Effects or Lottie Creator, especially when your team already has that workflow and the animation doesn't need to react to much. Pick Rive as your Lottie alternative when graphics need to respond to people or live data, adapt to layouts, or run across apps, websites, and game engines from one file.

Try Rive for free, or point your coding agent at the Rive CLI and open what it builds in the Rive Editor.

Start building
production-ready graphics

Get Started

Join our newsletter

Get all the latest Rive news delivered to your inbox.

Rive Blog

Rive vs Lottie

Rive vs Lottie compared: interactivity, Data Binding, file size, runtimes, and workflow. When to pick Lottie, when to pick Rive, and when to use both.