Lottie animation: what It Is, how It works and how to export from Linearity Move

Lottie is a JSON-based animation format that plays vector animations in web and mobile apps at any resolution, with file sizes a fraction of the equivalent GIF or video. In 2026 it's the standard format for animated UI elements, onboarding flows, loading indicators, and interactive icons across web and mobile — and Linearity Move exports Lottie directly. This guide covers what Lottie is, why it matters, how it compares to other animation formats, where it's used, and how to export Lottie files from Linearity Move.

What is Lottie?

Lottie is an open-source animation file format developed by Airbnb in 2017 — named after the German film director Charlotte "Lotte" Reiniger, a pioneer of animated film. The format uses JSON (JavaScript Object Notation) to describe vector animation data: shapes, paths, keyframes, easing curves, timing, and layer structure are all encoded as text rather than pixel data.

The result is an animation file that is:

• Scalable — vector-based, so it renders crisply at any size from a 16px icon to a 2000px hero animation
• Lightweight — a typical Lottie animation is 5–20KB, compared to hundreds of KB or MB for the equivalent GIF or video
• Interactive — Lottie animations can be controlled programmatically: played, paused, reversed, scrubbed, or triggered by user events
• Cross-platform — the same JSON file plays consistently in iOS apps, Android apps, web browsers, and React Native via the Lottie SDK

Lottie has become the animation standard for product teams because it sits at the intersection of design and development: designers create the animation, developers implement it with minimal code, and the output performs well on every device.

How Lottie works

A Lottie file is a JSON document that describes an animation scene. When a browser or app loads the file, the Lottie player library reads the JSON and renders the animation using the device's own graphics engine — SVG in browsers, Core Animation on iOS, or the Canvas API in some web contexts.

This rendering approach is what makes Lottie lightweight and sharp: instead of storing pixel data for every frame (like GIF or video), Lottie stores instructions for drawing vector shapes at each point in time. The device's graphics hardware does the rendering work, which is fast and resolution-independent.

A typical Lottie JSON file contains:

• Scene dimensions — the width and height of the animation canvas
• Frame rate — how many frames per second the animation plays at
• Total duration — in frames
• Layers — a stack of shape layers, image layers, and null (control) layers
• Keyframes — the position, scale, rotation, opacity, or path of each layer at specific points in time
• Easing curves — the interpolation between keyframes (linear, ease in, ease out, bezier)
• Masks and trim paths — used for reveal animations and stroke draw-on effects

The Lottie player library — most commonly Lottie Web (for browsers), lottie-ios, or lottie-android — interprets this JSON and renders the animation. The most widely used implementation is dotLottie, a containerised format that bundles the JSON with any image assets into a single .lottie file.

Lottie workflow: design and animate in Move, export as JSON, implement with the Lottie SDK in any web or mobile app.

Lottie vs GIF vs video

Choosing the right format depends on where the animation will be used and what it needs to do. Here's how Lottie compares to the other common animation formats:

The practical summary: use Lottie whenever the animation is part of a UI — loading states, onboarding, animated icons, empty states, micro-interactions. Use GIF only when a Lottie player isn't available (email, for example). Use video for content that involves filmed footage, complex compositing, or audio.

Where Lottie is used

Lottie has become the default format for a specific class of animation — the kind that lives inside a product rather than plays as content.

Loading and empty states. The spinner, the empty inbox illustration that pulses gently, the skeleton screen that breathes while content loads — these are almost always Lottie. The format is ideal because the animation loops seamlessly, plays at any size, and adds almost no weight to the page.

Onboarding flows. Mobile apps use Lottie for the illustrated screens that walk new users through features. The animations are typically short (2–4 seconds), looping or one-shot, and need to play crisply on every screen size from an iPhone SE to an iPad Pro.

Animated icons. Navigation tabs that animate when selected, buttons that morph between states, action icons that confirm a tap with a brief motion — all commonly implemented as Lottie. The format makes it practical to ship animated icons at the same cost as static ones.

Micro-interactions. The heart that animates when you like a post, the checkmark that draws itself when a form submits, the bell that shakes when there's a notification — Lottie micro-interactions are now standard in product design.

Marketing and landing pages. Product landing pages increasingly use Lottie for hero animations, feature illustrations, and scroll-triggered sequences. The low file size means the page doesn't sacrifice load speed for visual richness.

Error and success states. The animated success checkmark, the shaking error icon, the confetti burst on completion — Lottie handles all of these more elegantly than GIF or video.

Lottie in a typical mobile app: loading states, empty states, animated navigation, and confirmation feedback are all common use cases.

Understanding where Lottie fits requires understanding the broader motion design landscape — how animation styles, file formats, and workflows connect to each other. The animation and motion design guide covers this in full, including how Lottie sits alongside GIF, MP4, and SVG in a professional animation workflow.

What makes a good Lottie animation

Lottie works best for a specific type of animation. Understanding its strengths and limits saves significant rework when handing off to developers.

Keep it vector. Lottie is built around vector shapes. Raster images embedded in a Lottie file are supported but increase file size significantly and don't scale cleanly. If the animation uses photography or complex textures, Lottie may not be the right format.

Avoid unsupported effects. Some visual effects don't translate to Lottie — complex blend modes, certain filter effects, and some After Effects-specific features may export incorrectly or not at all. Stick to shape animations, path morphs, opacity changes, position and scale keyframes, and gradient fills for reliable results.

Keep file size in mind. A Lottie file that's 500KB is no longer lightweight. This usually happens when raster images are embedded, the animation has hundreds of layers, or the frame rate is unnecessarily high. Aim for under 50KB for UI animations; under 200KB for more complex illustrations.

Design for loop. Most UI Lottie animations loop — loading states, background illustrations, ambient motion. Design with a clean loop in mind: the last frame should connect smoothly to the first, or the animation should be clearly one-shot (plays once and stops).

Test at the implementation size. An animation designed at 400×400px and displayed at 24×24px may have details that disappear at small sizes. Test at the actual display size, not the design canvas size.

How to export Lottie from Linearity Move

Linearity Move exports Lottie directly — no third-party plugins, no After Effects required. The export follows the same workflow as any other format in Move.

Step 1 — Complete your animation in Linearity Move. Build your animation using Move's Design Mode and Animate Mode. Set your keyframes, timing, and easing on the timeline. The canvas dimensions you set become the Lottie scene dimensions.

Step 2 — Go to File → Export. From the menu bar, select File → Export to open the export dialog.

Step 3 — Select Lottie (.json) as the format. In the export format dropdown, choose Lottie (.json). This generates a standard Lottie JSON file from your animation.

Step 4 — Click Export. Move generates the JSON file. If any elements in your animation have potential compatibility issues with the Lottie format, Move will flag them in the export dialog so you can address them before handing off.

The exported JSON file can be dropped directly into any Lottie player implementation — web, iOS, Android, or React Native.

Full export guide: Lottie Files Export — Linearity Academy

What's preserved in the Lottie export

Move's Lottie export is designed to reflect what you see in the editor as accurately as possible.

What exports with full fidelity:

• All transforms — position, scale, rotation, opacity keyframes
• Easing curves — timing and interpolation match the editor preview exactly
• Layer hierarchy — nested layers, groups, and parent-child relationships
• Masks — clip masks and alpha mattes
• Path morphs — shape paths that animate between states
• Vector fills and strokes — solid colours, gradients, stroke widths
• Trim paths — for stroke draw-on animations

What to check before handing off:

• Raster images embedded in the animation increase file size and should be tested at the target display size
• Some advanced blend modes may not translate — check the export warning dialog
• Text layers are exported as shapes (outlined), not live text

The exported Lottie file is compatible with all standard Lottie SDKs and the dotLottie player.

Implementing Lottie in web and apps

Once you have the exported JSON file, implementation is straightforward. Here's a quick reference for the most common contexts — share this section with your developer.

Web (Lottie Web / dotLottie-web)

html

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>
<dotlottie-player
  src="/animations/my-animation.json"
  autoplay
  loop
  style="width: 200px; height: 200px">
</dotlottie-player>

Or using the lottie-web library:

javascript

import lottie from 'lottie-web';
lottie.loadAnimation({
container: document.getElementById('animation-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/animations/my-animation.json'
});

React

import Lottie from 'lottie-react';
import animationData from './my-animation.json';
export default function MyAnimation() {
return <Lottie animationData={animationData} loop={true} />;
}

iOS (Swift)

import Lottie
let animationView = LottieAnimationView(name: "my-animation")
animationView.loopMode = .loop
animationView.play()

Android (Kotlin)

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.my_animation)
animationView.repeatCount = LottieDrawable.INFINITE
animationView.playAnimation()

For the full Lottie SDK documentation, see lottiefiles.com/developers.