Lottie
Export Lottie JSON for lottie-web, iOS and Android, with components as precomps.
Lottie JSON (Bodymovin 5.x) plays in lottie-web, lottie-ios and lottie-android and dotLottie, and imports into Rive and After Effects (with plugins). Bézier curves map one to one; springs are baked into dense keyframes so their overshoot survives.
- Press ⌘E.
- Under Other formats, click Lottie (“lottie-web, iOS, Android”).
- Save the
.jsonfile.
What comes along
- Rectangles, ellipses and paths as shape layers with fill, stroke and trim; images as embedded assets; text as text layers.
- Groups as nulls with parenting.
- Components as precomps, one per combination of props and variants; instances time-remapped for start, speed and play mode.
- Trim paths, gradients (animated angle, shift and crossfade sampled at 30 fps), masks and shape keys.
- Drop shadows and layer blur as Lottie effects; motion blur along one axis.
- The camera's zoom, pan and roll, as a camera null that parents the scene.
- Font names and origins: Google stylesheet,
fonts/<file>next to the.json, or installed.
What doesn't
The Code tab's Lottie view and the notice list what your scene loses:
| In your scene | In Lottie |
|---|---|
| Keyframed blur | Dropped (players don't support it reliably) |
| Camera tilt and depth blur | Flat: zoom, pan and roll only |
| Video layers | The poster frame |
| SF Symbols | Placeholder circles |
| Angular gradients | Linear gradients |
| Gradient text | Its first color |
| Inner shadows | Dropped |
| Glass, background blur, zoom blur, color adjust, fade | Exported without them |
| Inside or outside strokes on paths | Centered |
| Taper | Uniform width |
| States and triggers | The timeline only (“Timeline only · no interactions”) |
| Text animations | The text without per-letter animation |