Lottie and Rive: what each is for

Lottie and Rive both let you ship vector animation inside apps and websites, but they come from different ideas and solve slightly different problems. Knowing the difference saves you from building in the wrong tool.

Lottie in one paragraph

Lottie is an open JSON format for vector animation, originally created at Airbnb. Designers usually animate in After Effects and export with the Bodymovin plugin or LottieFiles tools. Player libraries for the web, iOS, Android, React Native and Flutter read the JSON and draw the animation natively. Lottie is essentially a timeline: it plays from frame A to frame B. You can play, pause, loop or jump to segments from code, but complex interactive logic lives in your app, not in the file.

Rive in one paragraph

Rive is a design and animation tool with its own editor and runtimes. You draw, rig and animate directly in Rive, then build state machines that define how the animation reacts to inputs such as a hover, a click or a number from your app. The exported .riv file is a compact binary that contains both the artwork and the interactive logic. Runtimes exist for the web, iOS, Android, Flutter, React, React Native and game engines.

A simple way to choose

• An animation that just plays, such as a success checkmark or a loading spinner made by a motion designer in After Effects: Lottie is straightforward and widely supported.
• An animation with several states that blend and react to user input, such as a character that follows the pointer or a toggle with hover, press and on states: Rive keeps that logic inside the file.
• A simple fade, slide or colour change on a button: CSS or native platform animation is usually best. No file needed.
• Photographic or complex 3D content: video is often the right answer.

Why ship vector animation at all

Vector animations scale to any screen density, are usually far smaller than video and can change at runtime. You can recolour them for dark mode, swap text, or control them from app state. That flexibility is why product teams use them for onboarding, empty states, feedback and brand moments.

What we will build

Three pieces across the course: a like button, an onboarding illustration and a loading character. Each exists in a Lottie version and a Rive version so you can compare the workflow, file size and result directly.