MP4 to Lottie Converter

How to convert MP4 to Lottie JSON

1. 1

   Load your clip

   Drop an MP4, WebM, MOV or OGG file (up to 200 MB) onto the workspace, or press Browse.

2. 2

   Trim to the part you need

   Drag the start and end handles. The frame budget shows how close you are to 300 frames.

3. 3

   Choose a preset or settings

   Pick FPS, max width, WebP or JPEG and quality. Watch the size estimate as you go.

4. 4

   Convert

   Press Convert to Lottie. Progress is shown frame by frame, and you can cancel at any time.

5. 5

   Download and use

   Compare the original and the Lottie side by side, download the JSON, and copy the snippet for your platform.

MP4 to Lottie conversion: use cases, FPS, and file size guide

When to convert MP4 to Lottie instead of using video

Video files (MP4, WebM) are optimal for long-form content, but for short UI animations — loaders, success states, empty-state illustrations, onboarding steps — Lottie JSON is the better choice. Lottie can be controlled programmatically (pause, reverse, set speed, seek to frame), scales without pixelation on high-DPI displays, and integrates cleanly into React, Vue, Swift, and Kotlin without a separate video player component. If you need to animate an existing video clip inside an app and the clip is under 10–15 seconds, converting to Lottie via this tool is a practical workflow. For anything longer, keep using video.

Choosing the right FPS for your animation

FPS determines how many frames are extracted per second, directly affecting both smoothness and output JSON size. For slow-moving transitions or icon animations, 8–10 fps is almost always sufficient. For product demos or motion graphics with fast movement, 15–24 fps keeps it smooth. 30 fps matches standard video but limits your clip to 10 seconds and produces the largest JSON. As a rule of thumb: start at 10 fps and only go higher if you see noticeable stuttering in the Lottie preview. You can always re-convert at a higher setting.

Best MP4 to Lottie settings by use case

MP4 to Lottie file size guide

Controlling output file size

The output JSON size is mainly determined by three factors: number of frames (FPS × clip duration), frame dimensions (max width setting), and per-frame compression (WebP/JPEG quality). Halving the max width cuts per-frame data to roughly a quarter (area scales quadratically). Reducing FPS from 15 to 10 cuts frame count by 33%. WebP at 85% vs PNG is typically 50–70% smaller per frame. Combined, these levers can reduce a naive conversion from tens of megabytes to under 1 MB for a short loop. The frame deduplication step also helps for clips that have still or near-still sections — identical encoded frames share a single asset in the JSON. You can check the estimated size live in the converter before you convert.

Reference point: a 5-second clip at 10 fps and 480 px is typically under 2 MB. Still too big? Run it through the Lottie Optimizer — recompressing embedded frames and trimming precision typically cuts 20–60% off the size before shipping.

Use the Lottie JSON in React, iOS, Android and React Native

Using converted Lottie in React, iOS, and Android

Once you have the JSON, drop it into your project. In React use lottie-react; in React Native use lottie-react-native; for iOS (Swift) use the lottie-ios package; for Android (Kotlin/Java) use lottie-android. All of these accept a local JSON file — no internet required at runtime. The embedded WebP/JPEG frames are decoded by the Lottie renderer the same way it would handle any image asset.

Dropping the JSON into React, iOS, and Android

Once downloaded, the JSON works directly with the standard Lottie SDKs — no extra conversion step:

import Lottie from "lottie-react";
import converted from "./converted.json";

export function Loader() {
  return <Lottie animationData={converted} loop autoplay />;
}

import Lottie

let view = LottieAnimationView(name: "converted")
view.loopMode = .loop
view.play()

val view = LottieAnimationView(context)
view.setAnimation("converted.json")
view.repeatCount = LottieDrawable.INFINITE
view.playAnimation()

import LottieView from "lottie-react-native";

<LottieView source={require("./converted.json")} autoPlay loop />

If the JSON is too large for a mobile bundle, run it through the Lottie Optimizer first.

MP4 to JSON explained

MP4 to JSON: same output, different search term

If you searched "MP4 to JSON" instead of "MP4 to Lottie," you landed in the right place — a Lottie animation is a JSON file following a specific animation schema. Whichever term you use, this converter produces the same result: a standard .json file with your video's frames embedded, ready for any Lottie-compatible player.

MP4 to Lottie vs After Effects and LottieFiles

This converter vs. LottieFiles and After Effects

Troubleshooting

Common problems and fixes

Output JSON is too large

Lower FPS to 8–10 and max width to 320–480 px — both compound to cut size dramatically. Use WebP at 80%, then run the Lottie Optimizer.

Animation looks choppy

Raise FPS to 15–24 for smoother motion, accepting a larger file, and keep the clip within 300 frames.

Colors look off or banded

Raise WebP quality above 80% — low settings can introduce banding on gradients. JPEG is lossier than WebP.

Video won’t load at all

Confirm it’s MP4 (H.264), WebM, MOV, or OGG — other containers or codecs like ProRes aren’t decodable by browsers. Re-export as H.264 MP4.

Related Tools

• GIF to LottieAnimated GIF to Lottie JSON
• Video to GIFMP4, WebM or MOV to GIF
• Lottie to GIFRender a Lottie as GIF
• Lottie PreviewTest playback and inspect

Related tools for your workflow

If you need a GIF first, convert your video with our Video to GIF tool, then bring the GIF into the GIF to Lottie converter. To build an animation from still images, use the Animated GIF Maker and convert the result. If your source images need to be resized or compressed before animating, use the Image Resizer or Image Compressor. For images with backgrounds to remove first, try the Background Remover. See our full Lottie converter toolkit for every conversion direction in one place.