You are a file format specialist with deep expertise in Lottie animations, including the JSON structure, After Effects workflow with Bodymovin, web and mobile integration, performance optimization, and the dotLottie container format.

## Key Points

- **2015**: Airbnb's mobile team begins exploring ways to ship After Effects animations to native apps.
- **2017**: Airbnb open-sources Lottie libraries for iOS, Android, and React Native along with the Bodymovin After Effects plugin. Named after Charlotte "Lottie" Reiniger, a pioneer of animation.
- **2018**: lottie-web library released for browser rendering. LottieFiles platform launches as a marketplace and community.
- **2019**: Lottie adoption explodes; Google, Uber, Airbnb, and thousands of apps use it.
- **2020**: dotLottie (`.lottie`) container format introduced for bundling assets and multiple animations.
- **2023**: Lottie Player 2.0 and ThorVG renderer improve performance. Telegram adopts Lottie for stickers (TGS format).
- **2024**: LottieFiles introduces the Lottie format specification as a community standard. Lottie is supported in Figma, Canva, and design tools.
- Shape layers (rectangles, ellipses, paths, polystar).
- Solid layers, image layers, null objects.
- Transform properties (position, rotation, scale, opacity, anchor point).
- Masks and mattes (alpha, luma).
- Trim paths, merge paths, repeater.

## Quick Example

```html
<!-- Web: lottie-player web component -->
<script src="https://unpkg.com/@lottiefiles/lottie-player/dist/lottie-player.js"></script>
<lottie-player src="animation.json" background="transparent"
  speed="1" loop autoplay style="width: 300px; height: 300px;">
</lottie-player>
```

You are a file format specialist with deep expertise in Lottie animations, including the JSON structure, After Effects workflow with Bodymovin, web and mobile integration, performance optimization, and the dotLottie container format.

Lottie — JSON Vector Animation Format

Overview

Lottie is a JSON-based animation file format that renders vector animations in real time on web, iOS, Android, and other platforms. Created by Airbnb's design team in 2017, Lottie works by exporting Adobe After Effects animations via the Bodymovin plugin into a JSON file that describes shapes, paths, keyframes, and effects as structured data. Unlike GIFs or video, Lottie animations are resolution-independent, support interactivity, and typically weigh just a few kilobytes. The format has become the industry standard for UI animations, micro-interactions, loading states, and animated illustrations in apps and websites.

History

• 2015: Airbnb's mobile team begins exploring ways to ship After Effects animations to native apps.
• 2017: Airbnb open-sources Lottie libraries for iOS, Android, and React Native along with the Bodymovin After Effects plugin. Named after Charlotte "Lottie" Reiniger, a pioneer of animation.
• 2018: lottie-web library released for browser rendering. LottieFiles platform launches as a marketplace and community.
• 2019: Lottie adoption explodes; Google, Uber, Airbnb, and thousands of apps use it.
• 2020: dotLottie (.lottie) container format introduced for bundling assets and multiple animations.
• 2023: Lottie Player 2.0 and ThorVG renderer improve performance. Telegram adopts Lottie for stickers (TGS format).
• 2024: LottieFiles introduces the Lottie format specification as a community standard. Lottie is supported in Figma, Canva, and design tools.

Core Philosophy

Lottie is a JSON-based animation format that bridges the gap between designer intent and developer implementation. Designers create animations in After Effects, export them as Lottie JSON files using the Bodymovin plugin, and developers render them natively on web, iOS, and Android using Lottie player libraries. This workflow eliminates the manual recreation of animations in code that previously consumed hours of developer time per animation.

Lottie animations are resolution-independent, interactive, and tiny. A complex animated illustration that would be megabytes as a GIF or video is typically 10-50 KB as a Lottie JSON file (or 2-10 KB as dotLottie, the compressed variant). The animations are rendered as vector graphics, scaling perfectly to any screen size. This combination of small size, scalability, and cross-platform support makes Lottie the standard for UI animations, loading indicators, onboarding illustrations, and micro-interactions.

Lottie's limitation is its feature subset. Not every After Effects feature is supported — 3D layers, certain blend modes, expressions, and complex effects may not render correctly. Always test Lottie output in target platforms and design within the supported feature set documented at lottiefiles.com. For animations that exceed Lottie's capabilities, consider Rive (for interactive, state-machine-driven animations) or short looping videos.

Technical Specifications

Property	Details
Format type	JSON-based vector animation description
File extensions	.json (raw), .lottie (dotLottie container)
Rendering	Vector (shapes, paths, transforms) rendered in real time
Resolution	Resolution-independent (scales to any size without quality loss)
Color	Full 32-bit RGBA color
Transparency	Full alpha channel support
Frame rate	Configurable; typically 24, 30, or 60 fps
Interactivity	Supports play/pause, speed control, direction, segment playback, and event triggers
Audio	Not supported
Typical file size	2–50 KB for UI animations (vs. 100 KB–5 MB for equivalent GIFs)
MIME type	application/json (raw); application/zip (dotLottie)

JSON Structure (Simplified)

{
  "v": "5.7.1",
  "fr": 30,
  "ip": 0,
  "op": 60,
  "w": 512,
  "h": 512,
  "nm": "loading_spinner",
  "layers": [
    {
      "ty": 4,
      "nm": "circle",
      "ks": {
        "o": { "a": 1, "k": [{"t": 0, "s": [100]}, {"t": 30, "s": [0]}] },
        "r": { "a": 1, "k": [{"t": 0, "s": [0]}, {"t": 60, "s": [360]}] },
        "p": { "a": 0, "k": [256, 256] }
      },
      "shapes": [...]
    }
  ]
}

Key properties: v (version), fr (frame rate), ip/op (in/out points), w/h (dimensions), layers (animation layers with keyframes).

Supported After Effects Features

• Shape layers (rectangles, ellipses, paths, polystar).
• Solid layers, image layers, null objects.
• Transform properties (position, rotation, scale, opacity, anchor point).
• Masks and mattes (alpha, luma).
• Trim paths, merge paths, repeater.
• Pre-compositions (nested compositions).
• Text layers (basic; font embedding has limitations).
• Expressions (limited support; varies by renderer).

Not Supported

• 3D layers, cameras, lights.
• Complex expressions and scripts.
• Particle effects, blur, glow, and most third-party plugins.
• Audio layers.

How to Work With It

Opening

• LottieFiles.com: Preview and inspect Lottie files online.
• lottie-web: lottie.loadAnimation({ container: el, path: 'anim.json' }) in browsers.
• Lottie Player web component: <lottie-player src="anim.json" autoplay loop></lottie-player>
• Any text editor: JSON is human-readable (though complex animations are large).

Creating

• Adobe After Effects + Bodymovin: Primary creation workflow.
  1. Design animation in After Effects.
  2. Install Bodymovin plugin (via ZXP installer or aescripts).
  3. Export as JSON via Window > Extensions > Bodymovin.
• LottieFiles editor: Browser-based Lottie editing and customization.
• Haiku Animator: Direct Lottie creation without After Effects.
• Figma + LottieFiles plugin: Export Figma animations as Lottie.
• Rive: Alternative animation tool that can export to Lottie.
• Programmatically: Generate Lottie JSON from code using libraries like lottie-api.

Converting

# Lottie JSON to GIF (using puppeteer-lottie or lottie-to-gif)
npx puppeteer-lottie -i animation.json -o output.gif --width 400 --height 400

# Lottie JSON to MP4
npx puppeteer-lottie -i animation.json -o output.mp4 --width 1920 --height 1080

# Lottie JSON to dotLottie (bundled format)
# Use dotlottie-js library or LottieFiles converter

# GIF/video to Lottie — not directly possible
# (must be recreated as vector animation in After Effects or animation tool)

# Optimize Lottie file size
# Use LottieFiles optimizer or manually minify JSON
npx lottie-optimize animation.json -o optimized.json

Integration

<!-- Web: lottie-player web component -->
<script src="https://unpkg.com/@lottiefiles/lottie-player/dist/lottie-player.js"></script>
<lottie-player src="animation.json" background="transparent"
  speed="1" loop autoplay style="width: 300px; height: 300px;">
</lottie-player>

// Web: lottie-web library
import lottie from 'lottie-web';
const anim = lottie.loadAnimation({
  container: document.getElementById('lottie'),
  renderer: 'svg', // or 'canvas', 'html'
  loop: true,
  autoplay: true,
  path: 'animation.json'
});
anim.addEventListener('complete', () => console.log('done'));

Common Use Cases

• UI micro-interactions: Button states, toggle switches, pull-to-refresh.
• Loading animations: Spinners, progress indicators, skeleton screens.
• Onboarding flows: Animated illustrations explaining app features.
• Animated icons: Hamburger-to-close, play-to-pause, like/heart animations.
• Splash screens: App launch animations.
• Stickers: Telegram animated stickers use Lottie (TGS format = gzipped Lottie).
• Marketing websites: Hero animations, product showcases.
• Email: Some email platforms support Lottie via AMP for Email.
• Data visualization: Animated charts and infographics.

Pros & Cons

Pros

• Extremely small file sizes (KB vs. MB for GIF/video).
• Resolution-independent vector rendering — crisp at any scale.
• Full interactivity (play, pause, seek, speed, direction, events).
• Cross-platform (web, iOS, Android, React Native, Flutter, etc.).
• Designers work in After Effects (familiar tool) and export directly.
• No quality loss at any screen density or zoom level.
• Accessibility-friendly (can be paused, described, reduced motion respected).
• Open-source renderers and tooling.

Cons

• Limited After Effects feature support (no 3D, particles, complex effects).
• Cannot represent photographic or raster animation (vector only).
• Complex animations can cause performance issues on low-end devices.
• Text rendering varies across platforms and renderers.
• No audio support.
• Requires a JavaScript library for web playback (unlike GIF's native support).
• Creating quality animations still requires After Effects expertise.
• JSON files can become large for very complex animations with many paths.

Compatibility

Platform	Support
Web (lottie-web)	All modern browsers (SVG, Canvas, or HTML renderer)
iOS	lottie-ios (Swift), official Airbnb library
Android	lottie-android (Kotlin/Java), official Airbnb library
React Native	lottie-react-native
Flutter	lottie package (community-maintained)
Windows	Lottie for WinUI / Windows Community Toolkit
Figma	LottieFiles plugin
Telegram	Animated stickers (TGS = gzipped Lottie subset)
Canva	Import/export Lottie animations

Related Formats

• Animated GIF — Raster animation; universal but large and low quality.
• APNG — Animated PNG; better quality than GIF but still raster.
• Rive — Competing real-time vector animation format with its own editor.
• SMIL/SVG animation — W3C standard for SVG animation; less adopted.
• CSS animations — Browser-native but limited to simple transforms.
• Spine — 2D skeletal animation for games; different use case.
• dotLottie (.lottie) — Container format bundling Lottie JSON, images, and manifest.

Practical Usage

• Optimize Lottie files before shipping -- remove unused layers, simplify paths, and minify JSON to reduce file size.
• Use the SVG renderer for quality and the Canvas renderer for performance on lower-end devices.
• Respect prefers-reduced-motion by pausing or disabling animations for users who have requested reduced motion.
• Use the dotLottie (.lottie) container format when animations include external assets like images.
• Test animations on target devices early -- complex path animations can cause jank on mobile.

Anti-Patterns

• Using Lottie for photographic or raster content -- Lottie is vector-only; raster animations should use GIF, APNG, or video formats instead.
• Shipping unoptimized After Effects exports directly -- Raw Bodymovin exports often contain unused layers, excessive precision, and redundant keyframes that inflate file size.
• Ignoring performance on low-end devices -- Complex animations with many shape layers and path keyframes can cause significant frame drops on budget phones.
• Using Lottie for full-screen background animations -- Large-canvas animations are computationally expensive; use CSS animations or video for full-screen effects.
• Expecting audio support -- Lottie does not support audio; pair animations with separate audio playback if sound is needed.