Lottie turns After Effects comps into tiny JSON files that play natively on web, iOS and Android. But the export only works if you design for it. This tutorial walks through my full pipeline — setup, the effects that break, and a handoff developers thank you for.
Build Lottie-safe from frame one
Lottie supports transforms, masks, mattes and a subset of effects — not everything. Work with shape layers instead of Illustrator imports where you can, avoid expressions except simple wiggle-free math, and keep parenting shallow. If you need a glow, fake it with a blurred duplicate shape rather than the Glow effect.
The export checklist
- Preview in Lottiefiles first. The web preview catches unsupported features before they reach a build.
- Embed small rasters. Keep embedded images under 200KB or host them and reference by URL.
- Test on device. Android and iOS render a few features differently — verify both before sign-off.
Handing off like a professional
Deliver the .json plus a preview video, the frame rate, loop behaviour (loop, ping-pong, play-once) and the exact trigger — on appear, on tap, on success. Name files by feature and state (checkout-success.json), so nobody opens five generically named animations to find the right one.
Takeaway
Lottie rewards restraint: simple shapes, honest motion, clean layers. Master the constraints and your animations ship at kilobytes, not megabytes.
Need production-ready animation?
From storyboard to shippable Lottie, I handle the whole path.
Get in touch