Lottie-Web Deploy & Usage Guide

1. Prerequisites

For Animation Export (Designers)

Adobe After Effects CC 2014 or later
Administrator rights (for extension installation on some systems)

For Web Development

Node.js 12+ and npm (or yarn)
Modern web browser (Chrome, Firefox, Safari, Edge)
Git (for source builds)

For Manual Extension Installation (macOS)

Terminal access
Homebrew (optional, for automated install)

2. Installation

Option A: After Effects Extension (Bodymovin)

Method 1: Aescripts + Aeplugins (Recommended)

Download and install via: https://aescripts.com/bodymovin/

Method 2: Adobe Exchange

Install via Creative Cloud Desktop: https://exchange.adobe.com/creativecloud.details.12557.html

Method 3: Manual ZXP Install

# Download ZIP from repo, extract, then use ZXP Installer on:
# /build/extension/bodymovin.zxp

Method 4: Manual File Copy (Developer Mode)

# macOS
cp -R /path/to/bodymovin/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

# Windows
# Copy to: C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\
# Or: C:\Users\<username>\AppData\Roaming\Adobe\CEP\extensions\

Enable Debug Mode (required for manual installs):

# macOS - create/edit plist
defaults write ~/Library/Preferences/com.adobe.CSXS.6.plist PlayerDebugMode -string "1"

# Windows - Registry
# Create String value "PlayerDebugMode" = "1" at:
# HKEY_CURRENT_USER/Software/Adobe/CSXS.6

Method 5: Homebrew (macOS)

brew tap danielbayley/adobe
brew cask install lottie

Option B: Web Player (Developers)

NPM

npm install lottie-web

Bower (Legacy)

bower install bodymovin

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

Direct Download

Get lottie.js from the /build/player/ folder in the repository.

3. Configuration

After Effects Settings

Required: Enable script file system access

Windows: Edit > Preferences > Scripting & Expressions... > Check "Allow Scripts to Write Files and Access Network"
Mac: After Effects > Preferences > Scripting & Expressions... > Check "Allow Scripts to Write Files and Access Network"

Old AE Versions (pre-2019):

Windows: Edit > Preferences > General > "Allow Scripts to Write Files and Access Network"
Mac: After Effects > Preferences > General > "Allow Scripts to Write Files and Access Network"

Web Player Configuration

No environment variables required. Configuration happens at initialization:

const animation = lottie.loadAnimation({
  container: document.getElementById('lottie'), // required
  renderer: 'svg', // 'svg' | 'canvas' | 'html'
  loop: true, // boolean or number
  autoplay: true, // boolean
  path: 'data.json', // path to JSON (mutually exclusive with animationData)
  // OR
  // animationData: animationObject, // direct JS object
  name: 'myAnimation' // optional reference name
});

Important: If your animation contains repeaters and you plan to call loadAnimation multiple times with the same animation object, deep clone the object first to avoid reference conflicts.

4. Build & Run

Building from Source

# Clone repository
git clone https://github.com/airbnb/lottie-web.git
cd lottie-web

# Install dependencies
npm install

# Build player (outputs to build/player/)
npm run build

Local Development Server

# Serve examples (if available in repo)
npm start
# Or use a simple HTTP server
npx http-server -p 8080

Basic HTML Implementation

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
</head>
<body>
  <div id="lottie-container" style="width: 500px; height: 500px;"></div>
  
  <script>
    lottie.loadAnimation({
      container: document.getElementById('lottie-container'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'path/to/animation.json'
    });
  </script>
</body>
</html>

Animation Control API

const anim = lottie.loadAnimation({...});

// Control methods
anim.play();
anim.pause();
anim.stop();
anim.setSpeed(1.5); // 1.5x speed
anim.setDirection(-1); // reverse
anim.goToAndStop(50, true); // frame 50, isFrame=true
anim.goToAndPlay(100, true);
anim.destroy();

// Events
anim.addEventListener('complete', () => console.log('done'));
anim.addEventListener('loopComplete', () => console.log('loop done'));
anim.addEventListener('enterFrame', (e) => console.log(e.currentTime));

5. Deployment

Web Deployment Options

1. CDN (Simplest)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

2. Bundler Integration (Webpack/Rollup/Vite)

// ES6 Modules
import lottie from 'lottie-web';

// CommonJS
const lottie = require('lottie-web');

3. Module Import (Specific Renderers)

import lottie from 'lottie-web/build/player/lottie_svg';
// or
import lottie from 'lottie-web/build/player/lottie_canvas';
// or
import lottie from 'lottie-web/build/player/lottie_html';

After Effects Export Workflow

Open AE Project: Window > Extensions > Bodymovin
Select Composition: Check the composition(s) to export
Set Destination: Choose output folder
Render: Click Render button
Output Files:
- data.json (animation data)
- images/ folder (if using images/AI layers)

Production Checklist

JSON file served with correct MIME type (application/json)
CORS headers configured if loading from different domain
Images folder path correctly set via assetsPath option if assets are external
Gzip/Brotli compression enabled for JSON files (often 80%+ size reduction)
Consider using SVG renderer for scalability, Canvas for performance with many animations

6. Troubleshooting

Extension Issues

Extension not appearing in After Effects:

Ensure PlayerDebugMode is set in registry/plist (see Section 3)
Try CSXS.7, CSXS.8, or CSXS.9 instead of CSXS.6 depending on your AE version
Restart After Effects after installation

"Could not write file" errors:

Verify "Allow Scripts to Write Files and Access Network" is checked in AE preferences
On Windows, run AE as Administrator if installing to Program Files
Check folder permissions on destination directory

Export fails with images:

Ensure AI layers are converted to shapes or images are collected with the project
Check that destination folder has write permissions

Web Player Issues

Animation not loading (404):

Verify JSON path is correct relative to HTML file
Check browser console for CORS errors when loading from external domains
Ensure web server is running (animations won't load via file:// protocol due to security restrictions)

Images missing in animation:

// Set base path for assets
lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  path: 'data.json',
  assetsPath: 'https://example.com/path/to/images/' // specify image base URL
});

Performance issues:

Use renderer: 'canvas' for complex animations with many elements
Use renderer: 'svg' for simpler animations requiring DOM interaction
Disable subframe rendering if not needed: lottie.setSubframeRendering(false)

Memory leaks:

Always call anim.destroy() when removing animations from DOM
Remove event listeners before destroying: anim.removeEventListener(...)

Repeaters causing issues: When reusing animation data with repeaters:

// Deep clone to prevent mutation
const animationData = JSON.parse(JSON.stringify(originalData));
lottie.loadAnimation({ animationData: animationData, ... });

Worker Thread Issues

If using Web Worker support (advanced), ensure:

Worker scripts are hosted on same origin
Blob URLs are allowed by CSP headers

For additional help, see airbnb.io/lottie and the GitHub Issues.

How to Deploy & Use bodymovin/bodymovin