MOV to Lottie Converter

Why MOV files end up needing Lottie conversion

MOV is everywhere in a design workflow even when nobody chooses it deliberately: iPhone screen recordings, QuickTime screen captures on macOS, and After Effects renders all default to the QuickTime container. But apps and websites rarely want to ship raw video for a short UI animation — video players add weight, autoplay policies get in the way, and you lose programmatic control. Converting the MOV to Lottie JSON gives you a single file that plays in lottie-web, React, React Native, iOS, and Android with scrubbing, looping, and speed control built in. If your source is an MP4 instead, use our dedicated MP4 to Lottie converter; for browser-recorded WebM files there's WebM to Lottie.

Getting the best result from screen recordings

Screen recordings are mostly static with short bursts of motion, which makes them ideal for this converter's frame deduplication — identical frames are stored once, so a 15-second recording where only 3 seconds move produces a surprisingly small JSON. Use the clip range controls to cut straight to the interaction you want to show, pick 10–12 fps (screen UI reads clearly at low frame rates), and set max width to 480px for docs or 640px for landing pages. WebP output at 85% keeps text in the recording legible.

Codec notes: H.264, HEVC, and ProRes

The MOV container can hold many codecs, and browser support differs. H.264 decodes everywhere — if your MOV came from QuickTime's screen recorder or an export preset labeled "compatibility," it will just work. HEVC/H.265 (the iPhone default when "High Efficiency" is on) decodes in Safari and on some hardware-accelerated Chrome installs; if the preview stays black, open this page in Safari or switch the phone to Most Compatible. ProRes is an editing codec no browser decodes — export an H.264 version from After Effects or Final Cut first. This is a browser limitation, not a converter one: everything runs client-side, so we can only read what your browser can play.

MOV to JSON: same file, different name

If you searched for "MOV to JSON" rather than "MOV to Lottie," you're in the right place. Lottie animations are JSON files — a Lottie JSON is just a JSON document following a specific animation schema that lottie-web, lottie-react, and the native SDKs know how to render. Whether you call it MOV to JSON, MOV to Lottie JSON, or QuickTime to JSON, this converter produces the same standard output: a downloadable .json file with your video's frames embedded, ready to hand to any Lottie player without needing to know the terminology up front.

Using the converted animation in React, iOS, and Android

Once you've downloaded the JSON, integrating it takes a few lines of code in whatever stack you're shipping to:

import Lottie from 'lottie-react';
import animationData from './converted.json';

<Lottie animationData={animationData} loop autoplay />

import LottieView from 'lottie-react-native';

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

import Lottie

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

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

All four snippets load the exact JSON file this converter produces — no format conversion, no intermediate step. If the file feels large for a mobile bundle, run it through our Lottie Optimizer first; recompressing embedded frames and trimming precision typically cuts 20-60% off the size before it ships.

This converter vs. LottieFiles and After Effects

LottieFiles' own converter and paid tools are built around vector Lottie authored in After Effects with Bodymovin — they don't accept an arbitrary MOV recording as input. Getting a screen recording into Lottie the traditional way means importing the video into After Effects, rotoscoping or tracing it, and exporting with Bodymovin — hours of manual work for something a phone recorded in fifteen seconds. This tool skips that entirely: it takes the MOV directly, decodes it in your browser, and produces a working (raster) Lottie JSON in the time it takes to click Convert. The trade-off is that the output embeds image frames rather than true vector paths, so it's the right tool for turning existing footage into Lottie, not for authoring new vector animations from scratch — for that, After Effects and Bodymovin remain the standard.

Common problems and how to fix them

The preview stays black or the file won't load: almost always a codec issue — see the HEVC/ProRes guidance above. The output JSON looks huge: lower the FPS to 8-10 and the max width to 320-480px; both cuts compound, and a busy 15-second clip can easily shrink from tens of megabytes to under one. The animation stutters compared to the source video: that's expected at low FPS settings — raise to 15-20 fps for smoother motion, accepting a larger file. Colors look slightly different after conversion: check the WebP quality slider; below 60% some color banding can appear on gradients, so raise it if your recording has smooth color transitions like a splash screen or gradient background.

After the conversion: optimizing and repurposing

The Lottie JSON downloads directly to your machine, ready for lottie-web or the LottieFiles ecosystem. If you also need a universally shareable version for Slack or email, convert the same clip with Video to GIF, or take the Lottie you just made and run it through Lottie to GIF. Coming from the opposite direction — an animated GIF you want in an app — use GIF to Lottie. All of these run fully in your browser with no uploads. See our full Lottie converter toolkit for every conversion direction in one place.