How to Export Lottie Animations from After Effects

Lottie is a JSON-based animation format that plays beautifully on web and mobile at tiny file sizes. It's become the standard for animated icons, micro-interactions, and web animations.

What is Lottie?
Lottie renders After Effects animations in real-time on web and mobile apps. The animations are exported as small JSON files (typically 10-50KB) that replace GIFs (which would be 1-10MB for the same animation). Created by Airbnb's design team.

Installing Bodymovin (the exporter):
1. In After Effects: Window → Extensions → Find Extensions on Exchange
2. Search for "Bodymovin" — install it (free!)
3. Or install via aescripts.com → Bodymovin/LottieFiles
4. After install: Window → Extensions → Bodymovin

Exporting your animation:
1. Create/open your AE composition
2. Window → Extensions → Bodymovin
3. Select your composition in the Bodymovin panel
4. Set destination folder
5. Click Render
6. You get a .json file — that's your Lottie animation!

Testing your Lottie:
- Upload to lottiefiles.com/preview to see it in a browser
- Use the LottieFiles app (desktop/mobile) for previewing
- Or embed in HTML:

<script src="https://unpkg.com/@lottiefiles/lottie-player"></script>

<lottie-player src="animation.json" background="transparent" speed="1" loop autoplay></lottie-player>

Supported AE features:
✅ Shape layers (paths, fills, strokes, gradients)
✅ Solid layers
✅ Precomps
✅ Masks
✅ Trim Paths
✅ Transform properties (position, scale, rotation, opacity)
✅ Easing/keyframe interpolation
✅ Repeaters
✅ Track mattes (Alpha, Luma)

NOT supported (common issues):
❌ Effects (Gaussian Blur, Glow, Drop Shadow, etc.)
❌ Expressions (most don't transfer)
❌ 3D layers and cameras
❌ Video/image footage (images can be embedded but increase file size)
❌ Blend modes (limited support)
❌ Text animation presets (use shape layers instead)

Best practices for Lottie-ready animations:
- Use shape layers exclusively — no raster images
- Bake all expressions into keyframes before export (Window → Smoother)
- Keep it simple — fewer layers = smaller file
- Avoid complex masks and mattes
- Test frequently with LottieFiles preview during production

Pro tip: Design for Lottie from the START. Don't create a complex AE animation and then try to convert — design within Lottie's constraints. The most effective Lottie animations are simple, clean, and shape-based. If you need effects, create them using shape layers instead of AE effects (e.g., use shape layer glow instead of the Glow effect).