EasyLottie Guide
How to Turn a Screen Recording (MOV) into a Lottie
Use a short screen recording in an image-sequence Lottie workflow. Convert locally, compare output size, and test playback before adding it to your project.
Why convert a screen recording to Lottie
A short screen recording can fit an existing Lottie workflow when packaged as raster frames and animation JSON. Conversion is not guaranteed to make the recording smaller than its original video. Compare the exported bytes and playback with the original before deciding what to embed in onboarding, demos, changelogs, or docs.
EasyLottie converts the recording locally without uploading the source. Cloud sync, sharing, and support sample submission upload selected files only when you choose those actions.
Step-by-step: MOV / screen recording to Lottie
The Video to Lottie tool accepts MOV alongside MP4, WebM, GIF, and image sequences. Codec support depends on your browser. Re-export unsupported MOV/HEVC as H.264 MP4; changing the filename extension does not convert it. MP4/MOV sources over 30 seconds must be shortened before selection.
- Open the Video to Lottie tool and drop your .mov (or .mp4) recording in.
- Trim to the exact moment you want to show - shorter clips make smaller, cleaner assets.
- If you recorded over a solid color and want transparency, key it out with the built-in chroma keyer.
- Choose an output: Lottie ZIP, transparent WebM, optimized GIF, or PNG sequence.
- Export and download - all processed locally.
Keep it short and small
Screen recordings are pixel data, so the result is an image-sequence (raster) Lottie rather than a tiny vector one. The single biggest lever on file size is length: trim to just the frames that matter, and drop the resolution to what the embed actually needs. A focused three-second clip at the right size beats a fifteen-second full-screen capture every time.
Which output to pick
Choose Lottie ZIP if your player supports image assets and preserve the paths when unpacking it. Choose WebM only after checking alpha playback in your target browser. GIF supports binary transparency and a limited palette. Choose PNG sequence for full-alpha frames. Compare the actual output size rather than assuming one format is smaller.
Quick checklist
- Drop the .mov / .mp4 recording into Video to Lottie - nothing is uploaded.
- Trim aggressively; length drives file size the most.
- Key out a solid background if you want transparency.
- Drop the resolution to what the embed needs.
- Export Lottie ZIP / transparent WebM / GIF / PNG sequence.
Reproduce the workflow
Use these local sample files to repeat the checks described in this guide. Review the file before using it in a production project.
Tested: which setting actually shrinks a screen recording
We converted one four-second UI recording (7,743 bytes as H.264 MP4) four times with the public converter, changing one setting per run. Each byte count is the unchanged downloaded Lottie ZIP.
| Run | Lottie ZIP size | Change vs. 480 px / 24 fps / 4 s |
|---|---|---|
| 480 px, 24 fps, full 4 s | 187,773 bytes (96 frames) | Baseline |
| 240 px, 24 fps, full 4 s | 141,349 bytes (96 frames) | -24.7% with a quarter of the pixels |
| 480 px, 12 fps, full 4 s | 94,171 bytes (48 frames) | -49.8% with half the frames |
| 480 px, 24 fps, cut to 2 s | 93,341 bytes (48 frames) | -50.3% with half the frames |
The Lottie ZIP was 24 times the size of the MP4 it came from. H.264 stores what changes between frames; an image-sequence Lottie stores every frame as its own PNG (96 images here).
Halving the number of frames, by frame rate or by length, halved the file. Size followed the frame count almost exactly.
Halving the long edge removed three quarters of the pixels but only 25% of the bytes. Flat UI colour compresses well at any size, so for UI recordings trimming beats downscaling.
In the September benchmark of the same clip, a WebM export was 34,001 bytes and a GIF 506,377 bytes. If the target player accepts video, a Lottie wrapper is the expensive choice.
Know the limits
- One synthetic UI clip, measured once in desktop Chrome. Real recordings with text, gradients or noise compress differently, so resolution may matter more for them.
- The result is a raster image sequence: it does not become sharper on high-density screens and it cannot be edited as vector shapes.
- MOV files only open when the browser can decode their codec. HEVC or ProRes recordings may need re-export as H.264 MP4 first.
If your result is different
- 1.If the file is too large, lower the frame rate or trim before reducing the long edge; that order removed the most bytes here.
- 2.If the MOV will not open, re-export it as H.264 MP4 from QuickTime, your screen recorder or FFmpeg, then try again.
- 3.If the player shows missing images, keep the images/ folder next to the animation JSON exactly as it was in the ZIP.
Frequently asked questions
Can I convert a .mov screen recording to Lottie?
Yes, when the browser can decode the MOV codec. Start with a short clip; if decoding fails, re-export the source as H.264 MP4. The Lottie output contains raster image frames, not editable vectors.
Will it be a small vector Lottie?
No. A screen recording is pixel data, so the result is an image-sequence Lottie. Trim and downscale to keep it small.
Is my recording uploaded?
Conversion, keying, and export run locally without source upload. Optional cloud sync, sharing, or support sample submission uploads the selected files only when you choose it.
How do I make the background transparent?
If you recorded over a solid color, use the built-in keyer to remove it, then export a transparent WebM or PNG sequence.
Primary sources
Technical behavior was checked against the original runtime or format documentation below.