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.
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.
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.