This article was first published on 21 January 2020. It has since been updated on 6 April 2026 following new developments.

Lottie is a JSON-based animation format that lets you ship animations on any platform as easily as shipping static assets. It is small, vector-based, scalable, and supported on every major platform without additional software.

It is important to understand the distinction between two related but different things: Lottie JSON is the base animation format where it handles playback, scalability, and cross-platform support. dotLottie (.lottie) is a superset format that extends Lottie JSON with compression, multi-animation bundling, theming, state machines, motion tokens, and ThorVG-powered rendering consistency. Features like interactivity and theming belong to dotLottie; not to Lottie JSON alone.

This guide walks through every reason to choose Lottie and dotLottie with accurate feature attribution for each.

Lottie JSON vs dotLottie (.lottie): What each format supports

Use this as a quick reference before diving into the reasons below. Features attributed to dotLottie require the .lottie format and a dotLottie-compatible player; they are not available in standard Lottie JSON.

Lottie JSON benefits

1. Lottie plays everywhere

Lottie is an animation format that plays on the web, all major mobile platforms, IoT devices, desktop applications, and more without requiring any additional software on the user's device.

• Web: Runs on any modern browser via JavaScript-based players. No plugin, no Flash, no video embed required.
• iOS and Android: Native rendering libraries available for Swift and Kotlin/Jetpack Compose.
• React Native, Flutter, Windows (.NET), Qt: Official or community libraries for all major frameworks and platforms.
• Tizen, LVGL, Godot, Espressif: Lottie rendering (via ThorVG) is already in production on embedded systems and gaming platforms.

2. Tiny file sizes without sacrificing quality

Lottie JSON animations are dramatically smaller than the alternatives while retaining full quality at any resolution:

• vs GIF: Lottie is up to 6x smaller than an equivalent GIF
• vs MP4 / video: Lottie renders as vectors, not raster frames; no codec overhead
• vs APNG: significantly smaller and infinitely scalable

3. Infinite scalability with no pixelation

Lottie animations are vector-based. The player renders at the native resolution of the device's screen, meaning:

• Animations are always sharp, regardless of screen size or pixel density.
• A user zooming in gets a re-render at native resolution with no pixelation at any magnification.
• No need to maintain 1x, 2x, 3x resolution variants as one file serves all.
• Animations automatically scale to their container without manual adjustment, just as modern UI frameworks expect.

4. Basic runtime interactivity, available with Lottie JSON through player APIs

Standard Lottie JSON can be controlled at runtime by compatible players, so animations can respond to interactions such as scrolling, clicking, or hovering through player APIs and custom JavaScript or native code. This covers patterns like scroll-synced playback, click-to-play, hover triggers, and other event-driven controls.

However, this interactivity is not inherently encoded in the Lottie JSON file itself. In most cases, the logic lives in the player, integration layer, or app code. More advanced runtime property binding, such as updating text, colors, gradients, or transforms from live data, is better described as a capability of specific runtimes or formats like dotLottie with Motion Tokens, rather than standard Lottie JSON alone.

5. Lottie closes the gap between design & development

Before Lottie, motion designers built animations in After Effects and handed them to developers, who would try to re-implement them in code. The options were limited to low-quality GIF/MP4 exports or full code reconstructions.

LottieFiles changed that workflow. With the LottieFiles for After Effects plugin, designers can export animations from After Effects into the Lottie format, making them directly usable across web, mobile, and app interfaces. We also have various other plugins such as Figma, Webflow, Framer, and more. You can view the full list of plugins here.

Now, instead of rebuilding motion from scratch, developers can work from the actual animation asset itself; creating a much smoother handoff between design and development.

dotLottie (.lottie) benefits: beyond Lottie JSON

The following benefits require the dotLottie format and a dotLottie-compatible player (dotlottie-web, dotlottie-ios, dotlottie-android, etc.). They are not available in standard Lottie JSON.

1. Guaranteed cross-platform visual consistency, powered by ThorVG

Historically, the biggest pain point in multi-platform Lottie deployment was inconsistency; gradients rendering differently on iOS vs Android, masks not matching, easing feeling slightly off. Different platforms used different rendering engines and the spec drifted in practice.

dotLottie runtimes solve this by using one shared engine across every platform: ThorVG. ThorVG is a production-ready, open-source vector graphics engine (~150 KB) that runs as WebAssembly on the web and through native bindings on iOS, Android, and embedded platforms. Because every platform shares the same renderer, the same animation looks the same everywhere.

2. No-code interactivity via State Machines

dotLottie State Machines are the most significant new capability in the Lottie ecosystem. They allow designers to define how an animation responds to user interactions such as clicks, hovers, scroll events, API responses, custom triggers/

The interactivity logic is designed visually inside Lottie Creator, then embedded directly into the .lottie file. The dotLottie player on every platform reads and executes it natively; no extra code needed from developers for each platform.

What this enables:

• A button that plays its hover state on hover, pressed state on click, and resets on release; all in one .lottie file
• A loading indicator that transitions to success or error based on an API response
• An onboarding flow that sequences animations based on user progress
• Any stateful UI component; toggles, traffic lights, form validators, multi-step flows

3. Data-driven animation via Motion Tokens

Motion Tokens are a dotLottie feature that allow animation properties, such as colors, text content, numeric values, and transforms, to be exposed as bindable tokens updated at runtime from live data sources.

This turns animations into live UI components rather than static playback assets:

• A welcome animation that displays the user's name from your auth layer
• A progress ring reflecting a live API value
• Color tokens pulled directly from your design system at runtime
• A dashboard chart that animates around real-time data

4. Compression & asset bundling

dotLottie packages everything into a single .lottie archive using Deflate compression:

• File sizes up to 80% to 90% smaller than equivalent Lottie JSON
• Multiple animations bundled in one file; fewer HTTP requests, one source of truth
• Fonts, images, themes, and state machine definitions all in one package
• Reduced CDN costs and bandwidth at scale

Real-world results

Lottie and dotLottie are trusted by over 17 million designers and developers at 280,000+ companies worldwide. Here is what teams have achieved:

• The Washington Post: Implemented Lottie and experience more than 80% reduction in animation file sizes, which resulted in faster load times across high-traffic pages, greater flexibility without engineering overhead and increased reader engagement.
• Canva: Canva switched their iOS Lottie rendering pipeline to ThorVG (the dotLottie rendering engine) and achieved approximately an 80% improvement in rendering speed and a 70% reduction in peak memory usage, plus a significant reduction in rendering errors.
• Wise: Wise leveraged dotLottie animations to create clear, bold designs to improve customer comprehension and strengthen brand consistency through features.

Get your Lottie on

Here are some helpful links if you're keen on adopting Lottie or dotLottie:

• dotLottie
• ThorVG
• dotLottie runtimes
• dotLottie State Machines
• LottieFiles plugins and integrations
• dotLottie theming