Lottie to MP4 Converter

From vector keyframes to H.264 video

A Lottie JSON describes an animation as vector shapes and keyframes; an MP4 stores compressed pixel frames. Converting means rendering every frame at your chosen resolution with the official lottie-web engine, then encoding the frames as H.264 — the codec every phone, browser, editor, and platform accepts. This tool does the entire pipeline in your browser using WebCodecs, the same hardware-accelerated encoder your video calls use, so a 10-second animation typically converts in a few seconds. For the reverse direction — extracting a Lottie from an existing video — use MP4 to Lottie, MOV to Lottie, or WebM to Lottie.

MP4 vs GIF for sharing animations

Both formats play everywhere, so which should you export? MP4 wins on quality and size: full 24-bit color, smooth 30–60 fps, and files roughly 5–10× smaller than an equivalent GIF. GIF wins on autoplay ubiquity: it animates inline in GitHub READMEs, email clients, and chat apps where video needs a click. A good rule — social media, presentations, and video editing take MP4; documentation, email, and chat take GIF. Both converters accept the same files, so exporting both takes seconds: this page for MP4, Lottie to GIF for GIF.

Choosing resolution, frame rate, and bitrate

Lottie is vector, so you can render at any size without quality loss — the question is what the destination needs. Instagram and LinkedIn feeds are comfortable at 720–1080px wide; a hero video on a product page rarely needs more than 1280px; anything destined for further editing should match your timeline resolution. For frame rate, 30 fps is indistinguishable from 60 fps for most motion design — reserve 60 fps for fast, fluid UI animations. The bitrate presets map to intent: Balanced (4 Mbps) for social and web, High (8 Mbps) when the video will be re-encoded by an editor, Smaller (1.5 Mbps) for quick previews in chat.

The transparency question

H.264 MP4 has no alpha channel, so transparent Lottie animations must be composited over a solid color — that's what the background picker does. If you genuinely need transparency in a video pipeline, the professional path is exporting a PNG sequence or ProRes 4444 from After Effects; on the free web-tool path, a transparent GIF export covers chat, docs, and web embeds. For most social and presentation uses, matching the background color to the destination looks identical to true transparency.

JSON to MP4: same conversion, different search term

If you searched "JSON to MP4" rather than "Lottie to MP4," you're in the right place — a Lottie file is a JSON document following a specific animation schema, so the two phrases describe the same conversion. This also works with files downloaded straight from LottieFiles: drop in the .json or .lottie from their library, no LottieFiles account or API key needed here.

This converter vs. screen-recording or After Effects render

Before a tool like this, turning a Lottie into video meant either screen-recording it playing in a browser (soft edges, capped by monitor refresh rate, often includes the cursor) or reopening the source in After Effects to render a video pass — assuming you still have the AE project file. Rendering directly from the Lottie JSON with lottie-web and WebCodecs skips both: pixel-accurate frames at your exact chosen resolution and frame rate, encoded to H.264 in the browser, with no capture artifacts and no need for the original project file.

Common problems and fixes

Conversion fails or the tab freezes: WebCodecs requires a modern browser (Chrome, Edge, or recent Safari/Firefox) — on unsupported browsers the tool automatically falls back to WebM, which is clearly labeled in the result. Video looks blocky or low quality: raise the bitrate preset to High, especially for animations with fine detail or text. File is larger than expected: drop the resolution or switch to the Smaller bitrate preset — unlike Lottie's vector storage, every pixel of every frame costs bytes in video. Colors look different against the background: remember MP4 has no transparency — pick the background color option that matches where the video will be embedded.

Privacy and client-side encoding

Parsing, rendering, and H.264 encoding all happen locally — your animation is never uploaded, which matters for unreleased product work and client assets under NDA. There are no accounts, queues, or watermarks. The only requirement is a browser with WebCodecs (Chrome, Edge, recent Safari/Firefox); older browsers automatically fall back to WebM output, clearly labeled so you're never surprised by the file you download. See our full Lottie converter toolkit for every conversion direction in one place.