Lottie to MP4 conversion guide: codecs, quality, and workflows
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.
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.