Exporting After Effects Animations to Lottie: Audit, Optimization, Integration

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:

1. Convert all expressions to keyframes: Animation → Keyframe Assistant → Convert Expression to Keyframes.
2. Merge Shape layers where possible — fewer layers = smaller JSON.
3. Remove unused layers and hidden precomps.
4. Rasterize bitmap images or replace them with vector alternatives (bitmap in Lottie is a separate file or base64, severely bloat size).
5. 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

For two-state animations (toggle) we use setMinAndMaxProgress — play only the needed frame range, saving resources.

Work Stages

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.

Animations in Mobile Apps: Lottie, Rive, Spring, and Reanimated

We've built animations for dozens of projects — from game interfaces to bank-grade applications. We know how to achieve 120 fps even on Android with ProGuard. If an animation stutters, the problem isn't the tool but the approach. Below we show how we choose between Lottie and Rive, why Spring physics beats UIView.animate, and how Reanimated 3 pushes 60 fps on older devices. Get a consultation for your project — we'll assess the animation layer for free.

Why does UIView.animate break on complex scenarios?

UIView.animate(withDuration:) and ObjectAnimator on Android are fine for simple transitions. But as soon as the animation becomes interactive (user drags an element, speed depends on gesture), a different approach is needed.

On iOS, the right tool for gesture-driven animation is UIViewPropertyAnimator. It allows pausing, reversing, and modifying the animation in progress. A typical use case: a bottom sheet that follows the finger, continues with inertia after release, and snaps to the nearest position. With UIView.animate, this is either not possible or requires manual physics.

In SwiftUI, withAnimation works out of the box, but interactivity is limited — there's no direct analog to UIViewPropertyAnimator. A workaround is using .gesture(DragGesture()) + @GestureState + explicit position calculation. Or move to SwiftUI Animations API with Animation.spring(duration:bounce:) from iOS 17.

How does React Native Reanimated bypass the JS bridge?

React Native Animated API executes animations on the JS thread — this causes jank when the bridge is busy. Reanimated 3 solves this with worklets: functions that compile and run directly on the UI thread without crossing the JS bridge.

Example: parallax scroll header. With basic Animated.Value, fast scrolling drops FPS to 40-45 on mid-range Android. With Reanimated using useAnimatedScrollHandler, it stays at a stable 60 fps because all position calculations happen on the UI thread.

Reanimated 3 with useSharedValue, useAnimatedStyle, and withSpring/withTiming is the current standard for animations in React Native. Gesture Handler v2 is tightly integrated: useAnimatedGestureHandler replaces PanResponder and also runs on the UI thread.

Why can Lottie reduce FPS on Android?

Lottie exports After Effects animation as JSON. On iOS with lottie-ios it's stable, but on Android, complex effects (blur, particles, gradients) via Canvas rendering can cause drops to 30-40 fps. The solution: either simplify the animation or use Rive with hardware rendering. We tested: a 5 MB Lottie file with blur on Xiaomi Redmi Note 10 gave 48 fps, while the same animation in Rive (.riv 400 KB) gave 60 fps.

Lottie vs Rive: What to choose for interactive interfaces?

Both tools solve the task of "designer creates animation, developer adds the file." But they differ fundamentally.

The choice is simple: static decorative animation (splash screen, onboarding illustrations) — Lottie. Interactive UI elements with states — Rive. For example, a button with hover, pressed, loading, success states — one Rive animation with four states versus four separate Lottie files.

Spring physics and Hero transitions: how to achieve naturalness?

Spring animation feels natural because it simulates physics — mass, stiffness, and damping. In SwiftUI: Animation.spring(response:dampingFraction:). In Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

For Hero transitions (an element "flies" between screens), on iOS use UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. In SwiftUI with iOS 17 — matchedTransitionSource + navigationTransition(.zoom). On Flutter — Hero widget, which works out of the box.

How to avoid common mistakes in Hero transitions?

The animation starts fine, but on the target screen the element "jumps" to the final position. The reason: AutoLayout constraints are applied before the animation completes. Solution: call layoutIfNeeded() inside the animation block or use transform instead of frame changes.

What's included: animation layer turnkey

• Integration of Lottie/Rive files into the design system
• Code for gesture-driven transitions (bottom sheets, drawers, carousels)
• Testing on real devices (iOS 15–17, Android 10–14)
• Animation documentation (architecture, state keys)
• Support for design updates (30-day warranty)

We have 5+ years of experience in mobile development, over 30 projects with animations, certified iOS/Android developers.

Timelines

• Basic screen transitions and micro-interactions — 1 week.
• Lottie/Rive integration with design system — 3-5 days after receiving final files.
• Custom gesture-driven interactivity (sheet, drawer, physics carousel) — 1-2 weeks.

Contact us — we'll add animations turnkey in 2 weeks. First consultation is free.