MP4 to Lottie Converter

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.

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 1MB 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 output size in the KB indicator next to the result heading before downloading.

Using converted Lottie in React, iOS, and Android

Once you have the JSON, drop it into your project. In React: import Lottie from 'lottie-react'; <Lottie animationData={data} />. In React Native use lottie-react-native. For iOS (Swift) use the lottie-ios package from LottieFiles. 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.

Privacy and client-side processing

All frame extraction and encoding runs in your browser using the native HTML5 video and canvas APIs. The video file is never sent to a server. This makes the tool suitable for converting confidential or proprietary video content — internal product demos, unreleased features, corporate presentations — without any upload risk.

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.

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 animationData from './converted.json';

<Lottie animationData={animationData} loop autoplay />

import Lottie

let animationView = LottieAnimationView(name: "converted")
animationView.loopMode = .loop
animationView.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 — recompressing embedded frames and trimming precision typically cuts 20-60% off the size before shipping.

This converter vs. LottieFiles and After Effects

LottieFiles' tools and Bodymovin are built around vector Lottie authored in After Effects — they don't take an arbitrary video file as input. Turning existing footage into Lottie the traditional way means importing into After Effects, rotoscoping or tracing every frame, and exporting with Bodymovin — hours of manual work for a ten-second clip. This tool skips that: it decodes the MP4 directly in your browser and produces a working (raster) Lottie JSON in the time it takes to click Convert. It's the right tool for converting existing video into Lottie, not for authoring new vector animations from scratch — for that, After Effects remains the standard.

Common problems and fixes

Output JSON is too large: lower FPS to 8-10 and max width to 320-480px — both compound to cut size dramatically. Animation looks choppy: raise FPS to 15-24 for smoother motion, accepting a larger file. Colors look off after conversion: raise WebP quality above 80% — low settings can introduce banding on gradients. 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.

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 here. 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 before animating, try the Background Remover. See our full Lottie converter toolkit for every conversion direction in one place.