Creating Lottie animations for mobile app screens

Lottie animation: why the interface lags and how it gets fixed

Lottie animation looks harmless: a designer hands over a JSON file, a developer hooks it up to a screen — and now the button gently pulses and the onboarding comes alive.

The problem shows up later, when there are five such files on a single screen, each with its own timeline, and the app suddenly starts dropping frames on mid-range devices.

App interface animation stops being a decoration and becomes a bottleneck: the user sees stutter while scrolling, and memory consumption climbs in the logs.

The reason lies in how the Lottie player handles the contents of the file. Each layer is a separate object with its own transforms, masks, and effects; complex masks and blurs force the area to be redrawn from scratch on every frame.

If a vector scene contains hundreds of paths and rendering happens in real time, the load falls on the main thread — and the smoothness of the screens rests solely on powerful hardware. On weak devices this translates into frame rate drops and noticeable response delays.

The second hidden cost center is the weight and number of assets. One heavy JSON on a screen is still tolerable, but when animations are preloaded and stay in memory, the app quietly eats up the resource that lists and images need.

Animation optimization starts not with code but with an audit: how many scenes are actually needed, which layers can be simplified, and where a static state is enough.

Mobile app performance here comes down to three things — the complexity of the scene, the moment it launches, and the rendering method.

Removing unnecessary masks, splitting a long animation into short fragments, launching it only when the screen is visible, and caching the result is not cosmetic work but dealing with a bottleneck that directly affects retention. Let's break down how this gets solved in practice.

What a well-crafted Lottie animation delivers: the effect in numbers

Lottie animation is a vector format that plays natively on the device rather than as a video stream. The key difference from GIF and PNG sequences: instead of hundreds of raster frames, the build contains a single compact JSON file with curves and timings.

That is why a correctly assembled animation delivers a measurable effect: frame render time drops, memory consumption on the screen decreases, and the failure rate on low-end devices goes down.

What exactly we measure

• Frame render time. Vector layers are recalculated on the GPU, heavy raster substitutions do not block the main thread — the interface stays responsive even while scrolling.
• Memory consumption. A single JSON instead of a set of frames reduces the screen's weight severalfold: the animation does not hold dozens of raster layers in memory at once.
• Failure rate on low-end devices. Without a video stream and extra decoders, the animation does not "eat" frames on budget models — the scenario runs predictably.
• Render optimization. Masks, gradients, and nested compositions are rebuilt into a flat structure to avoid multiplying unnecessary layers during rendering.

Animation format comparison

Choosing a format is a trade-off between weight, smoothness, and scene complexity. For interface animations, vector almost always wins: it scales to any screen density without loss of quality and does not drag a video player along with it.

Lottie from Airbnb sets the standard for exchanging vector animation between design and development — the file is assembled once and plays identically on both platforms.

We build weight checks, layer counts, and a render profile into the assembly so that the effect of animations is real rather than declarative.

How we implement animations: stages of engineering work

Implementing animations starts not with drawing, but with an interface audit: engineers go through the screens, measure response time, and find places where the interface "stays silent" — transitions between states, data loading, action confirmation.

At this stage, we determine which scenarios genuinely benefit from motion and which remain static: animation for animation's sake eats into the frame budget and gets in the way of work.

Next comes design and assembly. Each transition gets timing, an easing curve, and an exit point so that the motion matches the logic of the screen rather than living separately from it.

Finished scenes are assembled into a Lottie animation and tested on real devices: file size, smoothness on low-end hardware, behavior when interrupted by a gesture.

1. Interface audit. We go through the screens, measure response, map out the places where animation is needed, and cut the excess.
2. Scenario alignment. We determine exactly what we animate, for how long, and what happens on a repeated tap or when leaving the screen.
3. Motion prototype. We assemble a draft Lottie animation for the key transitions and show it on the device before the final rendering.
4. Production assembly. We render the scenes, optimize contours and layers, and remove everything that doesn't affect the visuals but adds weight.
5. Device testing. We run it on low-end and high-end models, checking smoothness and memory consumption during prolonged use.
6. App integration. We connect the animations to the screens and make sure they don't block the interface and stop correctly.
7. Handover of animations and documentation. We deliver the source files, finished files, timing rules, and instructions on how to make edits without us.

This engineering process delivers a predictable result: animations don't bloat the build, don't lag on low-end devices, and remain manageable after handover. Describe your task — we'll come back with an estimate and a plan by stages.

How is Lottie different from frame-by-frame and native animation?

Lottie animation is vector animation that is described not by a set of images, but by a mathematical model: coordinates, curves, keyframes, and timings. The file stores instructions for "what moves and how," while a runtime library handles rendering on the device.

Hence the main difference from frame-by-frame animation: instead of dozens of raster frames, a single compact file goes into the app for each transition, and it scales to any screen without loss of sharpness.

Frame-by-frame animation is a sequence of ready-made images played like slides. It gives full control over the picture: you can draw complex textures, noise, light, and effects that vector simply cannot reproduce.

But the price is weight and memory: a long scene turns into hundreds of frames, each taking up space in the build and in RAM during playback. On weak devices, this shows up as stutters during scrolling and as battery drain.

Native animation is assembled using the platform's own tools — layers, transforms, transitions between screen states. It is ideal for interface motions: a button appearing, a tab switching, a response to a tap.

Here you get minimal weight and maximum responsiveness, because the system does everything. The limitation is expressiveness: a complex illustrative scene with dozens of independent objects is slow and costly to maintain when assembled with native animation.

Choosing a format is a trade-off between expressiveness, weight, and ease of edits.

Lottie wins where a detailed vector scene is needed, a single file for both platforms, and quick edits without rebuilding the app: the designer changes the file, and the update arrives without a release.

Frame-by-frame wins on short looping clips with photorealistic graphics, where vector is powerless. Native wins on everything related to interface behavior rather than illustration.

In terms of memory and complexity, Lottie loses when a scene is overloaded: hundreds of layers, heavy masks, blurs, and gradients force the runtime to recalculate geometry on every frame, and on budget devices this causes stutters.

Here, simplifying the scene, splitting it into several files, and preloading help. At the start, we evaluate each animation by these parameters and propose a format for a specific screen rather than using a default.

Case study: how we eliminated screen jank in a delivery app

The checkout screen in the delivery app janked during scrolling: a frame took longer to assemble than the device could display it in time, and on low-end models the animation broke down into stutters.

The problem was not in the layout, but in the fact that heavy vector layers were being rebuilt on every frame instead of being played back as a ready-made sequence.

Pre-fix measurements: frame rendering exceeded the 16 ms budget, peak memory consumption on the screen hovered around 180 MB, and the failure rate when opening the cart on entry-level devices reached 7%.

What exactly we changed

We moved the cart and delivery status animations into a Lottie animation — a pre-computed vector sequence that a native renderer plays back without rebuilding layers on every frame.

Heavy raster sprites and chains of nested layers were replaced with a single compact file, and the player itself is initialized once when entering the screen and reused across transitions.

Separately, we limited the number of simultaneously active animations: while one is playing, the others are paused so they don't compete for the rendering thread.

Metrics before and after

Scrolling stopped janking, and the cart screen opens predictably even on budget models. We work with Lottie — a format that plays back identically on both platforms without a separate build for each, so animation edits don't require rebuilding native modules.

Result of the implementation

UI smoothness no longer depends on the device class: what used to "fall apart" on low-end models now runs equally smoothly.

The app optimization had a side effect — the screen opens faster and puts less strain on the battery, because the renderer doesn't recalculate layers on every frame. We then carried this same approach over to the order tracking and onboarding screens.

Compatibility, rollback, and access doubts — let's break them down

A Lottie animation is not a standalone artifact "in a vacuum," but a file that must play correctly on specific versions of iOS and Android, in a specific runtime library, and in a specific screen state.

Therefore, the main technical question is not "does it look beautiful," but "what will happen when the animation meets your current stack." Below is a breakdown of typical doubts that arise before the start.

What if we have a different runtime version? We build the animation for the branch of the library that is already in the project, not for the latest one.

If the version is old — we either adapt the vector layers to the supported set of properties, or propose a targeted runtime update with regression testing. Animation compatibility is tested on real devices from your matrix, not just in the editor.

What if we need to roll back after release? Each animation is versioned as a separate file, so rolling back changes means replacing one artifact with the previous one, without rebuilding the screen logic.

We record which version went into which release, so a rollback takes minutes, not hours of searching.

What if we want to change animations ourselves? The documentation handover includes the layer structure, group names, and export rules — a designer or developer with basic experience can make an edit without breaking the runtime.

We also close technical doubts about migrating to another engine in advance: we describe which properties do not transfer one-to-one.

What the client receives:

• animation source files in an editable format;
• exported files for iOS and Android with on-device testing;
• a version map: which file is in which release;
• instructions for exporting and replacing animations;
• a list of supported properties and runtime limitations;
• a pre-release checklist.

Describe your current runtime version and device matrix — we will get back to you with an estimate and a work plan for animations.