What Is Lottie Animation? Lottie vs GIF vs Rive

Lottie is an animation file format: a small file of vectors, written in JSON, that plays natively on websites and in iOS and Android apps. It stays sharp on any screen, can react to scroll and clicks, and usually weighs far less than a GIF or video of the same animation. Airbnb released it as open source in 2017.

Below: how Lottie works, how it compares with GIF, MP4 and Rive, real file sizes from our projects and when Lottie is not the right choice.

How Lottie works

1. A motion designer creates the animation in professional animation software, using vector shapes.
2. The animation is exported as a Lottie file: a JSON file, or a dotLottie (.lottie), a compressed version that can hold several animations in one file.
3. A developer adds it to the site or app with a free Lottie player. The player draws the vectors live, so the animation is sharp at any size.

Because the file describes shapes and their movement instead of storing every frame as an image, a Lottie can scale from a phone to a 4K screen without getting blurry, and the developer can control it: play, pause, loop, jump to a section or react to the user.

Why is it called Lottie?

It is named after Lotte Reiniger, the German pioneer of silhouette animation and director of “The Adventures of Prince Achmed” (1926), the oldest surviving animated feature film.

Lottie vs GIF vs MP4 vs Rive

	Lottie	GIF	MP4 video	Rive
Made of	vectors	pixels	pixels	vectors
Sharp on any screen	yes	no	only at its resolution	yes
Transparent background	yes	yes, with hard edges	not in standard MP4	yes
Interactive	yes, with the player’s controls	no	no	yes, built around interactive states
Sound	no	no	yes	yes
Plays in email	no	yes	no	no
Best for	website loops, icons, onboarding, logos	email and places where nothing else plays	long or detailed scenes, video with sound	complex interactive animations and games

Lottie or GIF? For websites and apps, Lottie in most cases: it loads lighter, stays sharp on high resolution screens and can react to the user. A GIF still wins inside an email, where Lottie can’t play, so we often deliver both.

Lottie or Rive? Rive is a separate format with its own editor, designed around state machines: an animation that changes state as the user interacts, like a game character or an interactive button. Choose Rive when the animation itself is an interactive system. Choose Lottie for loops, illustrations, icons, onboarding screens and logo animations that a developer drops into a page, which covers most website and app animation.

Real Lottie file sizes from our work

Project	What it is	Length	File size
24GO	website hero loop, vector only	8 seconds	81 KB
Bright Idea	character loop, vector only	3 seconds	33 KB
Ravel	hand-lettered logo, vector only	5 seconds	333 KB
Samuraize	logo loop with 2 embedded images	10 seconds	1.6 MB
Agently	product dashboard with 15 embedded images	27 seconds	2.5 MB

The lesson: a Lottie is light when it is vector. Detailed paths, like a hand-lettered logo, add weight, and embedded images add the most. If your animation needs real screenshots or photos inside it, expect a heavier file, or have those parts delivered as video.

24GO: an 8 second hero loop for a website, 81 KB as a Lottie.

Bright Idea: a 3 second character loop, 33 KB.

ItsMoose: a series of Lottie animations made for the company’s website.

What Lottie can’t do

1. Sound. Lottie files have no audio. If the animation needs sound, it becomes an MP4.
2. Heavy effects. Strong blurs, glows and 3D don’t translate well to Lottie. If your idea needs them, that part is better delivered as video.
3. Email. Email apps don’t play Lottie. Use a GIF there; see how GIF email signatures work.
4. Photos. Lottie can carry images, but every one adds weight. A photographic scene is usually better as MP4.

How to add a Lottie animation to your website

1. Get the file: a .json or .lottie from your designer.
2. Add a Lottie player to the page. Most web frameworks and website builders support one, and your developer can add it with a few lines of code.
3. Set how it plays: loop, play once, or play on scroll, hover or click.
4. Check it on a phone and on a high resolution screen.

What a custom Lottie animation costs

	Simple	Detailed	Complex
Price	$100	$175	$350
What you get	1 animation with up to 2 elements	a website hero loop or a set of up to 4 elements	a complex illustrated scene or character animation
Interactivity			states for hover, scroll or click
Files	Lottie JSON and MP4	Lottie JSON and MP4, optimized for weight	Lottie JSON, MP4 and source files
Revision rounds	2	3	3
Delivery	3 days	3 days	4 days

Frequently asked questions

What is a Lottie file?

A JSON file that describes an animation as vector shapes and their movement. A Lottie player reads it and draws the animation live on a website or in an app.

Is Lottie better than GIF?

For websites and apps, usually yes: lighter, sharper and interactive. For email, no: email apps only play GIFs.

Can a Lottie animation have sound?

No. Lottie files have no audio. When sound matters, the animation is delivered as an MP4.

What is dotLottie?

A compressed version of the Lottie format (.lottie). It makes files smaller and can hold several animations in one file.

Should I use Rive or Lottie?

Lottie for loops, icons, illustrations, onboarding and logos that a developer adds to a page. Rive when the animation is an interactive system with many states, like a game character.

Get a custom Lottie animation

Send us your design, your vector files or just the idea. If there is no artwork yet, we illustrate it for you.

See our custom Lottie animation, compare all our prices or ask us about your project. “This guy is the best when it’s about complex lottie animations,” wrote a Lottie client on Fiverr, where we are rated 4.9 from 1,776 reviews.

Next step: Lottie and GIF animation: packages and samples · All prices

All posts