Lottie Files: The Complete Guide for Designers and Developers

I've been working with animation for over a decade, and if there's one format that has genuinely changed how I deliver work for the web, it's Lottie. If you're a designer or developer who hasn't explored Lottie files yet, this guide covers everything you need to know.

What Are Lottie Files?

Lottie is a JSON-based animation format originally developed by Airbnb's design team. The idea is simple: you create an animation in a tool like After Effects, export it as a lightweight JSON file, and play it natively on the web or in mobile apps.

The JSON file describes the animation mathematically - positions, paths, keyframes, easing curves - rather than storing pixel data like a video or GIF. This means the animation is resolution-independent and incredibly small.

A typical Lottie file looks like a blob of JSON with properties like frame rate, dimensions, layers, and shape data. You don't need to read it - players handle the rendering.

Why Lottie Beats the Alternatives

The biggest sell is file size. Here's what a typical 5-second animation looks like across formats:

Format | Typical Size | Transparency | Scalable | Interactive GIF | 2-5 MB | Jagged (1-bit alpha) | No | No MP4 | 500 KB - 1 MB | Not supported | No | No Lottie | 50-200 KB | Full alpha | Yes | Yes

That's not a typo. A Lottie file can be 10-50x smaller than a GIF for the same animation. And unlike GIF, you get smooth transparency with full alpha support. MP4 doesn't support transparency at all, which rules it out for overlays, UI elements, and anything that needs to sit on variable backgrounds.

Lottie files are vector-based, so they scale to any resolution without quality loss. A single file looks crisp on a phone screen and a 4K monitor. No @2x or @3x assets needed.

The real game-changer is interactivity. Because the animation is rendered in real-time by a player library, you can control it with code. Play on scroll. Pause on hover. Reverse direction on click. Change colors dynamically. Adjust speed based on user input. None of that is possible with a video file.

You can also tweak animations programmatically after export. Need to change the primary color across 200 layers? A few lines of JavaScript can do that without reopening After Effects.

How to Create Lottie Files

The most common workflow is After Effects with the Bodymovin plugin (now maintained by LottieFiles). You design and animate in AE, then export through Bodymovin, which converts your composition into the Lottie JSON format.

Here's the thing - not every AE feature exports cleanly. Stick to shape layers, solid transforms, masks, and trim paths. Avoid 3D layers, certain blend modes, and complex effects like turbulent displace. The Bodymovin docs have a compatibility list worth bookmarking.

Beyond After Effects, you have several other options:

- Jitter - a browser-based motion design tool that exports Lottie natively. Great if you want to skip AE entirely. - Cavalry - a node-based 2D animation tool. Think Houdini for motion graphics. It has Lottie export built in. - Figma plugins - tools like LottieFiles for Figma let you create simple animations directly in Figma and export them as Lottie. - LottieFiles editor - a web-based editor where you can modify existing Lottie files, change colors, adjust timing, and re-export. Useful for quick tweaks without opening AE.

Rive is another powerful tool worth mentioning - it takes a different approach to interactive animation, with a state machine system that lets you build complex interactive graphics right in the editor. It deserves its own deep dive, and I'll cover Rive in a future article.

For most professional work, I still use After Effects. The control and expression system are hard to beat. But for simpler UI animations, the browser-based tools are getting surprisingly capable.

Where Lottie Files Are Used

Lottie shows up everywhere now:

**Web applications** - loading spinners, success/error states, onboarding flows, micro-interactions, hero animations. Any place you'd use a GIF or video but want better performance and interactivity.

**Mobile apps** - both iOS and Android have first-class Lottie support through lottie-ios and lottie-android. React Native has lottie-react-native. The animation plays natively, not in a web view.

**Product UI** - toggle animations, pull-to-refresh, empty states, celebration moments. Lottie is perfect for these because the files are tiny and the animations feel native.

**Email** - some email clients support Lottie through AMP for Email. It's not universal, but it's growing. For clients that don't support it, you can set a static fallback image.

Playing Lottie on the Web

There are a few solid options for web playback:

**lottie-web** - the original player by Airbnb. It's the most battle-tested option. Renders to SVG, Canvas, or HTML. Install it via npm and point it at your JSON file. This is what I use for most projects.

**dotlottie-player** - the newer player from LottieFiles. Supports the .lottie format (a compressed version of the JSON). Slightly smaller bundle and better performance for complex animations.

**@lottiefiles/react-lottie-player** - a React wrapper that makes integration straightforward if you're in a React/Next.js project. Handles loading states and provides props for playback control.

All three are solid. For simple use cases, lottie-web with the SVG renderer is my go-to. For React projects, the LottieFiles player saves some boilerplate.

The Challenges

Lottie isn't perfect. The biggest friction point is that the final output is a JSON file. You can't just double-click it to preview. You need a player, a browser extension, or a dedicated tool to see what's inside.

This makes sharing with clients awkward. Stakeholders expect to see a video file they can play in QuickTime or VLC. Sending them a JSON file and saying "open this URL" adds friction to the review process.

That's actually why I built a free Lottie Preview tool - drop in any .json file and see it play instantly, no setup needed.

Complex After Effects features don't always survive the export. 3D layers, certain effects, expressions that rely on external data - these can break or export incorrectly. You learn to design within Bodymovin's constraints, but it takes some trial and error.

File size can also balloon if your animation has lots of complex paths. Detailed illustrations with hundreds of anchor points will produce large JSON files. The fix is to simplify paths in Illustrator before importing to AE, or use the Bodymovin optimization settings.

And while Lottie handles shape-based animation beautifully, it's not great for raster-heavy content. If your animation relies on photo textures or video footage, stick with MP4.

Tips for Keeping Files Small

- Use shape layers instead of importing AI or SVG assets - Reduce the number of anchor points on complex paths - Avoid large gradient meshes - Pre-compose wisely - unnecessary nesting adds overhead - Use Bodymovin's "Glyphs" option for text instead of converting to shapes - Test the export early and often, not just at the end

Wrapping Up

Lottie has become a core part of my delivery toolkit. For web and mobile animations, it's the best balance of quality, file size, and interactivity available. The tooling keeps improving, the community is active, and platform support is essentially universal at this point.

If you're a designer who hasn't tried exporting to Lottie yet, install Bodymovin and give it a shot with a simple shape animation. If you're a developer, grab lottie-web and see how easy it is to drop in. The learning curve is minimal and the results are immediate.

Check out the Lottie Preview tool to test your files, and feel free to reach out if you have questions about integrating Lottie into your workflow.