Creating Lottie Animations for Mobile Application Screens
The designer shows a beautiful onboarding in Figma with smoothly moving illustrations. One question: how will this be done? "Animation via Lottie" sounds simple. In reality, between a static illustration in Figma and a working .json file that looks identical on iPhone SE and Samsung A03, there's non-trivial work.
What to Decide Before Starting After Effects
Lottie renders vector graphics via the Bodymovin exporter. This means: raster textures, Photoshop effects, layer styles (outer glow, drop shadow via layer style) either don't export or convert to raster and bloat the .json to megabytes.
Before starting animation, agree with the designer on a list of constraints:
- Vector layers only (Shape Layers, not raster)
- Shadows—via separate Shape Layer with opacity, not via
Drop Shadoweffect - Gradients—Linear or Radial, no Angle/Diamond gradients (not properly supported by Bodymovin)
- Fonts—convert to curves via
Create Outlinesin Illustrator before AE import - Merge Paths—use cautiously; on Android API <26 requires software rendering
Creation Process
Start in Adobe Illustrator: prepare or adapt the illustration. Each animated element is a separate named layer. Group layers logically: background, character, character/head, character/hands, foreground. Hierarchy matters—it becomes the hierarchy of animatable objects in After Effects.
Import into After Effects via File → Import → Adobe Illustrator. Enable Create Composition with Retain Layer Sizes option. Each Illustrator layer becomes a separate AE layer with preserved sizes and positions.
Animate via keyframes. For mobile UI, key principles:
Timing: main onboarding screen animation is 1.5–2.5 seconds. Longer and users wait. Use Graph Editor for easing adjustments: Ease In on entry (slow start, accelerates), Ease Out on exit (decelerate toward end). For illustrations, this is smoother than linear interpolation.
Stagger: elements don't appear simultaneously but with 0.1–0.15 second offsets. Background → main element → details → text. Creates depth without 3D.
Loop: if animation loops (loading, idle state), ensure the first and last frames match or the transition is unnoticeable. For Lottie, avoid pingpong loop—it works in runtime but behaves slightly differently on iOS and Android.
After animation, install the Bodymovin plugin (free, GitHub: airbnb/lottie-web). Export via File → Scripts → Bodymovin. In settings: disable Glyphs (if fonts are converted), enable Assets → Embed only if there are external raster images and you accept size increase.
Post-Export Optimization
Raw .json from After Effects often contains excess data: unnecessary keyframes on unchanging properties, rounded numbers with 6+ decimal places.
Run through LottieFiles Optimizer—removes up to 50% of size. Additionally, manually check json for refId assets: if there are base64 strings with images, replace with external files or rasterize differently in Illustrator.
Test via LottieFiles preview (web) and the official app on real devices. Real devices matter: emulator won't show FPS drop on complex masks.
Common Creation Mistakes
Animation looks perfect in AE, but in Lottie preview some elements disappear or shift position. Cause: Track Matte layers or Pre-compose with incorrect settings. Luma Matte isn't supported by Bodymovin—only Alpha Matte.
Gradient fill works but runtime color is wrong. Often AE creates gradient with Colorspace: Linear RGB but Lottie interprets as sRGB. Fixed in AE project's Color Management settings.
Timeline
One onboarding screen animation (illustration ready) takes 1–2 days including optimization and testing. Full 3–5 screen onboarding with interconnected elements takes 3–5 days. Cost is calculated individually after assessing illustration complexity and number of animated states.