What is Lottie?

Lottie is a way to render high-quality vector animations in real time inside websites and apps without exporting video files like MP4 or GIF. Instead of baking animation into pixels, Lottie plays animation data directly as vector instructions.

Lottie was originally introduced by Airbnb to help teams ship crisp, lightweight UI motion created in After Effects. The idea was to export animation data and render it natively on each platform, rather than shipping heavy videos. This approach made animations smaller, scalable, and controllable by code.

Why Lottie matters

Before Lottie, common choices were GIFs and videos. GIFs can look blurry and get large quickly, and videos can be heavy and are less flexible for UI. Lottie became popular because it keeps animations sharp at any size, supports transparent backgrounds, and allows developers to control playback such as play, pause, loop, and speed.

Lottie JSON (.json)

A Lottie JSON file is a plain text file that contains the animation instructions exported from After Effects (commonly via the Bodymovin exporter). It includes shapes, paths, colors, keyframes, and timing data. It is not a video and usually does not bundle extra assets by default.

Where JSON works best

Lottie JSON is widely used on websites and web apps and is supported across many environments. It’s often the easiest option when you want to embed a single animation quickly and host it as a simple file.

Pros of JSON

JSON is widely supported, easy to host, and straightforward to integrate with common web players. It’s also human-readable, which can make debugging easier.

Cons of JSON

If you have multiple animations or external assets, you may end up managing several files. JSON is also typically larger than a packaged format.

.lottie (dotLottie)

A .lottie file is a modern container format for Lottie animations. It is commonly used to package animation data more efficiently and can include additional information like metadata and bundled assets. In practice, you can think of it as a packaged, compressed way to deliver Lottie content.

Why .lottie exists

As Lottie usage grew, teams wanted smaller downloads, better delivery, and a way to bundle assets and multiple animations into a single file. The .lottie format addresses these needs and is designed for smoother production and distribution workflows.

JSON vs .lottie quick comparison

JSON is plain text and typically the simplest to embed, while .lottie is a packaged format that is often smaller and can bundle assets and multiple animations. JSON has very broad compatibility, and .lottie is newer but increasingly supported via official players.

Which one should you use?

Use JSON if you want the simplest possible embed, you’re adding one animation to a website, or you want maximum compatibility. Use .lottie if you care about smaller file size, want a more production-friendly delivery format, or need to bundle assets and multiple animations.