What are Lottie Files?

Lottie is a JSON-based animation format originally created by Airbnb in 2017. It describes vector animations as structured data — shapes, transforms, keyframes, and easing curves — rather than rasterized pixels.

A Lottie player reads this JSON data and renders the animation in real-time using the device's graphics engine. The result is silky-smooth, resolution-independent animation that looks perfect on any screen size.

// Lottie JSON structure (simplified)
{
  "v": "5.7.0",        // Lottie spec version
  "fr": 60,            // Frame rate
  "ip": 0,             // In-point (first frame)
  "op": 180,           // Out-point (last frame)
  "w": 1920,           // Width
  "h": 1080,           // Height
  "layers": [
    {
      "ty": 4,          // Shape layer
      "nm": "Rectangle",
      "ks": { ... },    // Transform keyframes
      "shapes": [ ... ] // Shape definitions
    }
  ]
}

There are two file formats for Lottie animations:

• Lottie JSON (.json) — the original format. Human-readable, widely supported by animation tools and players. However, files can be large for complex animations since JSON is verbose.
• dotLottie (.lottie) — the modern compressed format. A binary container that compresses the JSON data and bundles any embedded assets. Significantly smaller file sizes while maintaining full fidelity.

Before Lottie, adding animations to websites meant choosing between GIFs (large, low quality, no transparency) or video files (even larger, needs a player). Lottie changes the equation entirely:

• Tiny file size — a 10-second Lottie animation can be under 50KB, while an equivalent GIF might be 2MB+
• Resolution independent — vector-based rendering scales perfectly on any display, from mobile to 4K
• Transparency support — alpha channels work natively, unlike GIF's binary transparency
• Scriptable — control playback speed, direction, frame range, and interactivity via JavaScript
• No codec dependencies — renders using the browser's canvas or SVG, no video decoder needed
• Accessible — animations can be paused, slowed down, or disabled for accessibility preferences

Lottie has been adopted across platforms and industries:

• Web applications — loading spinners, onboarding flows, micro-interactions
• Mobile apps — iOS and Android have native Lottie players (lottie-ios, lottie-android)
• Product UI — animated icons, success/error states, empty states, progress indicators
• Marketing — animated hero sections, feature highlights, call-to-action elements
• Documentation — animated diagrams that explain architecture, data flows, and processes
• Presentations — embedded in web-based slide decks for dynamic visuals

Excalimate can export your animated diagrams directly as both Lottie JSON and dotLottie files. This means you can:

• Design your diagram in the Excalidraw-powered editor
• Add keyframe animations, easing, and camera movements
• Export as dotLottie or Lottie JSON with one click
• Embed the result anywhere — websites, apps, documentation

No need for After Effects, Figma plugins, or complex animation toolchains. Go from whiteboard sketch to production Lottie animation in minutes.

The easiest way to add a Lottie animation to a website is with the dotlottie-wc web component:

<!-- Install the web component -->
<script src="https://unpkg.com/@dotlottie/player-component"></script>

<!-- Embed your animation -->
<dotlottie-wc
  src="my-animation.lottie"
  autoplay
  loop
  style="width: 400px; height: 300px"
></dotlottie-wc>

For React applications, use the official @lottiefiles/dotlottie-react package:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

function AnimatedDiagram() {
  return (
    <DotLottieReact
      src="/animations/architecture.lottie"
      autoplay
      loop={false}
      style={{ width: 600, height: 400 }}
    />
  );
}

Both approaches support autoplay, looping, speed control, and event callbacks for building interactive experiences around your animations.