Lottie: Lightweight Animations for Web and Apps, and Their Limits
Lottie is a JSON animation format for web, iOS, and Android. What it supports from After Effects, what it doesn't, how to control file weight, and alternatives.
What are Lottie and dotLottie?
Lottie is the format. LottieFiles describes it as a JSON-based animation file format meant to bring animations to any platform with files much smaller than a GIF or a video. Its help page says it works on web, iOS, Android, and more (LottieFiles, “What is Lottie and dotLottie”).
dotLottie is an open format that improves on the original JSON: a compressed .lottie file that packages the animation, the images, and the fonts into one bundle. LottieFiles claims it can be up to 80% smaller than standard JSON. That is the vendor’s figure, with no published measurement method, so measure with your own files.
dotLottie can also carry state machines: embedded logic with states, transitions, and inputs (numeric, string, boolean, or event signals) that lets the animation respond to user gestures or events (LottieFiles, “State machines”). A classic Lottie JSON file, by contrast, only plays the sequence.
Why should a designer care?
Because it is the cheapest way to bring quality motion into an interface without a developer coding every frame. A success icon, a loading animation, or an illustration that moves as it enters the screen can come out of After Effects or Figma and run across several platforms.
It also forces you to understand its limits before you design. An animation that looks perfect in After Effects may not play the same way, or may weigh too much, if it uses features the format doesn’t support.
What does it support from After Effects?
LottieFiles’ compatibility documentation separates three groups:
- Not supported. Expressions, cameras, lights, adjustment layers, most effects (for example CC Particle World or Liquify), Glow, audio, and guide layers.
- Partially supported. Drop Shadow, Blur, text with advanced animators, 3D rotation on the X and Y axes, luminance mattes, complex gradients, time remapping, and roving keyframes.
- Directly supported. Shape layers and position, scale, rotation, and opacity keyframes, among others.
The advice is clear: convert expressions to keyframes before exporting, use shape layers instead of raster, convert text to outlines or use the font at runtime, simulate the camera with 2D movement, and add audio in the application, not inside the animation (LottieFiles, “Lottie compatibility”). Several rows of that table are marked as untested, so verify your specific case.
How do you control the weight?
LottieFiles identifies images as the biggest factor in weight: each image layer is embedded as a PNG inside the file. So, whenever you can, draw with shapes. Other tips from its guide on preparing compositions:
- Frame rate. 24 fps is the lightest and 30 fps the usual choice. According to the guide, 60 fps weighs roughly twice as much as 30 fps. Use it only for short, motion-heavy animations.
- Keyframes and work area. Remove redundant keyframes and trim the work area: according to the guide, keyframes outside that range bloat the JSON without affecting playback.
- Nesting. Pre-compose only reusable groups. Each nesting level adds work at runtime.
- Optimized version. The optimized .lottie export is typically 30% to 60% smaller with identical playback, according to LottieFiles. That is a vendor claim: measure with your own file.
Example
Illustrative example: an ordering app has a loading spinner that is a 1.8 MB GIF. The team redesigns the animation in After Effects with vector shapes, removes a bounce expression by converting it to keyframes, trims the work area to the two-second cycle, and exports at 30 fps. The file ends up around 40 KB. The animation plays the same on Android and iOS, and the team loads it lazily, only when the orders screen appears. The change isn’t cosmetic: the screen stops taking time to show something.
When NOT to use Lottie
- When interactivity is the core of the component. Classic Lottie plays a sequence, and dotLottie’s state machines cover simple interaction. If the button must react to many states and inputs, compare it with Rive, which defines its state machines as the logic that controls the interactive animations in a Rive file (Rive documentation).
- When the animation depends on unsupported effects. Complex smoke or a 3D camera don’t translate well.
- When the design changes every week. Each change means re-exporting and checking the weight again.
- When the motion is decorative and heavy. An animation that adds no information can cost more than it is worth, especially on mobile.
Common mistakes
- Exporting without checking the compatibility matrix and discovering the problem in production.
- Using raster images inside the animation without a need.
- Leaving redundant keyframes that multiply the weight.
- Loading every animation at startup instead of lazily.
- Ignoring reduced motion for animations that loop.
How to start tomorrow
Pick an animation in your product that is currently a GIF or a video. Rebuild it in After Effects with vector shapes, remove expressions, and check the compatibility matrix. Export at 30 fps and compare the weight with the original. Ask the development team to test it on a mid-range device. And before you set it to loop, review the wiki’s reduced motion strategies, because a looping animation that never pauses is the first thing to adjust.