You spent weeks creating a smooth onboarding animation in After Effects, but after exporting via Bodymovin, the JSON weighs 3 MB, and on older Android devices the animation stutters? We specialize in exporting AE animations to Lottie: we conduct audits, optimization, and integration on iOS, Android, and Flutter. A typical scenario: an expression for bounce doesn't export, and masks with Luminance matte turn into empty rectangles. Our 5-step method transforms a raw AE project into a JSON ready for integration up to 200 KB — this is 4 times faster loading than a video of the same scene. In 5 years, we've processed over 50 projects, from micro-animations to complex 10-screen onboarding flows.
Typical Problems When Exporting AE to Lottie
Most errors arise from unsupported After Effects features. The most common:
- Expressions — Lottie only supports wiggle; other expressions must be converted to keyframes, otherwise the animation won't work.
- 3D layers — Lottie only works in 2D, all 3D transformations are ignored.
- Blend modes — on Android, some blend modes (e.g., Overlay) render incorrectly.
- Effects — Glow, Drop Shadow, and others from the Effects panel are not supported; they need to be replaced with Layer Styles or Shape layers.
- Raster images — if the animation contains bitmaps, the JSON size spikes and weak devices may freeze.
According to our project statistics, 70% of AE projects require rework before export. That's why an audit is a mandatory first step.
Which AE Functions Are Incompatible with Lottie?
The most common failure scenario is using expressions for dynamic behavior or a Glow effect from the Effects panel. After export, the animation either breaks or looks different. We check every layer, replace unsupported effects with similar ones from Shape layers or Layer Styles. For example, in one project with 12 onboarding screens, we replaced 8 expressions with keyframes — the animation ran on Android 9 without a single frame drop.
How to Optimize JSON for Mobile Apps?
Standard Bodymovin export without optimization yields bloated JSON. We run it through lottie-minify or LottieFiles Optimizer — compression is 30–50% of the original size without quality loss. For example, a 5-screen onboarding animation after optimization weighs 150–200 KB, which is 3 times smaller than the original. This is critical for fast app loading and saving user data.
JSON size directly affects loading time, parsing, and memory consumption. An optimized JSON (150-200 KB instead of 500+ KB) reduces deserialization time by 40% and lowers the risk of frame drops on devices with 2 GB RAM. For apps with dozens of animations (onboarding, loaders, micro-interactions), this is the difference between smooth UX and stuttering. Lottie is a cross-platform animation library from Airbnb.
How We Prepare Animation for Export
We use the Bodymovin plugin (LottieFiles AE Extension) with this preparation:
- Convert all expressions to keyframes:
Animation → Keyframe Assistant → Convert Expression to Keyframes. - Merge Shape layers where possible — fewer layers = smaller JSON.
- Remove unused layers and hidden precomps.
- Rasterize bitmap images or replace them with vector alternatives (bitmap in Lottie is a separate file or base64, severely bloat size).
- Check preview in LottieFiles Web Player before final export.
After export — verification via LottieFiles Preview App on real iOS and Android devices. Often we find: on Android some blend modes give wrong colors, and gradient strokes render differently — we fix this before delivering to you.
Case study. A client brought an AE onboarding project of 5 screens. Original JSON size — 2.8 MB. After optimization (removing duplicate layers, converting expressions, replacing bitmaps with vectors) — 190 KB. On an old Samsung Galaxy A5, the animation played without a single frame drop. Loading time over 3G decreased from 12 to 2 seconds.
Why JSON Optimization Is Critical for Mobile Apps?
Every extra kilobyte slows loading and increases battery drain. Our tests showed: a 200 KB animation decodes in 8 ms on iPhone 11, while 800 KB takes 35 ms — a 4+ times difference in time, critical when 10 animations are on screen. Optimized JSON takes up to 70% less cache space, especially important for apps with limited storage.
Integration into Mobile Projects
| Platform | Library | Setup |
|---|---|---|
| iOS | lottie-ios (SPM) | LottieAnimationView as UIView, for SwiftUI — LottieView |
| Android | lottie-android (Gradle) | LottieAnimationView in XML, LottieAnimation in Compose |
| Flutter | lottie package | Lottie.asset('assets/animation.json') with controller |
For two-state animations (toggle) we use setMinAndMaxProgress — play only the needed frame range, saving resources.
Work Stages
| Stage | Duration | Result |
|---|---|---|
| AE project audit | 1 day | Report on incompatible features, recommendations |
| Export and optimization | 1 day | JSON up to 200 KB, 50% compression |
| Integration on one platform | 1–2 days | Working on real devices, documentation |
What's Included in Our Service
- Audit of AE project for Lottie compatibility.
- Export via Bodymovin with preliminary preparation.
- JSON optimization (compression up to 50%).
- Integration on one platform (iOS/Android/Flutter) with testing on real devices.
- Compliance guarantee with App Store Review Guidelines and Play Console requirements.
- Documentation for playback and post-implementation support.
Timelines and Collaboration Terms
Export and integration of one animation takes from 1 day. For complex projects (5+ animations), timelines are calculated individually. Contact us — we will evaluate your AE project for free and offer the best turnkey solution. Get a consultation right now and ensure your animation works perfectly on all devices. Order an AE project audit — it's the first step to seamless animation in your mobile app.