After Effects to Lottie Export for Mobile Apps
Designer created an animation in After Effects—detailed, multiple layers, effects and masks. Goal: display identically in mobile app, reasonable file size, doesn't overload processor. Not always trivial: Lottie doesn't support all AE features; unprepared animation either displays incorrectly or weighs 2 MB.
What Lottie Supports and Doesn't
Reliably supported: Shape layers, Path animations, Trim paths, Fill/Stroke, Opacity, Position/Scale/Rotation, Masks, Solid layers, Precomps.
Partially supported with caveats: Text layers (font and platform dependent), Gradient fills (linear—yes, radial—verify), Blend modes (some don't work on Android).
Not supported: Expressions more complex than wiggle, 3D rotation (perspective), Effects (Glow, Drop Shadow via Effects panel—only via Layer Styles), some mask types (Luminance matte).
Most common failure: AE animator used expressions for dynamic behavior or applied Glow via Effects, and after export animation breaks or looks different. Pre-export AE project audit is mandatory.
Export Preparation Process
Use Bodymovin plugin (LottieFiles AE Extension). Before export:
- 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 with vector alternatives (bitmap in Lottie is separate file or base64 inside JSON, bad for size)
- Check Preview in LottieFiles Web Player before final export
After export, verify via LottieFiles Preview App on real iOS and Android devices. Often discovered: some blend modes on Android give wrong color, gradient strokes render differently.
File Size Optimization
Standard Bodymovin export without optimization produces bloated JSON. Run through LottieFiles Optimizer or lottie-minify npm package. Typical result: 30–50% of original size with no quality loss. Onboarding animation across 5 screens should total no more than 150–200 KB after optimization.
Mobile Project Integration
iOS: lottie-ios via SPM. LottieAnimationView adds as normal UIView. For SwiftUI—LottieView from same package.
Android: lottie-android via Gradle. LottieAnimationView in XML or LottieAnimation in Compose.
Flutter: lottie package. Lottie.asset('assets/animation.json') with controller for playback control.
For dual-state animations (toggle), use setMinAndMaxProgress—play only needed frame range.
Timeline: 1 day includes AE project audit, preparation, export, optimization, and integration on one platform.