WebM to Lottie Converter

Where WebM files come from — and why they need converting

WebM is the format the web itself produces: the MediaRecorder API behind browser screen recorders, Chrome extensions, OBS's web-friendly export, and most in-browser video tools all emit WebM with VP8 or VP9 video. That makes it the natural capture format for product demos and bug reports — but not a format you can drop into a mobile app or embed as a lightweight animation. Converting to Lottie JSON turns the recording into a single self-contained file that plays in lottie-web, lottie-react, iOS, and Android with full playback control. If your recording is an MP4 or a QuickTime file instead, use MP4 to Lottie or MOV to Lottie — same pipeline, tuned pages.

The duration quirk in MediaRecorder WebM files

Files produced by browser recorders often lack a duration header — the recorder streams bytes without knowing when it will stop. Browsers usually recover the duration after a full playthrough. If the clip range shows 0:00 or behaves oddly, press play in the preview panel once, let it reach the end, and then set your start and end times. The frame capture itself is unaffected; it seeks by timestamp directly.

Transparent WebM: the hidden superpower

VP9 WebM supports an alpha channel, and motion designers use it to export transparent renders from After Effects (via plugins) or Rive. This converter preserves that transparency when you pick WebP output — each captured frame keeps its alpha, and the resulting Lottie composites cleanly over any app background. That workflow — transparent WebM → Lottie — is one of the few free paths to get transparent video-sourced animations into a mobile app without After Effects scripting.

WebM to JSON: same output, different search term

If you searched "WebM to JSON" rather than "WebM to Lottie," you're in the right place — a Lottie animation is a JSON file following a specific animation schema. Whichever term you use, this converter produces the same result: a standard .json file with your recording's frames embedded, ready for any Lottie player.

Using the JSON in React, iOS, and Android

The converted file works directly with the standard Lottie SDKs — no extra conversion step needed:

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

<Lottie animationData={animationData} loop autoplay />

import Lottie

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

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

import LottieView from 'lottie-react-native';

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

This converter vs. LottieFiles and After Effects

LottieFiles' tools and Bodymovin are built around vector Lottie authored in After Effects — they don't accept an arbitrary WebM recording as input. Getting a screen recording into Lottie the traditional way means importing the video into After Effects, rotoscoping it, and exporting with Bodymovin. This tool skips that entirely: it decodes the WebM directly in your browser and produces a working (raster) Lottie JSON in the time it takes to click Convert — the right tool for turning existing recordings into Lottie, not for authoring new vector animations from scratch.

Common problems and fixes

Clip range shows 0:00 or won't set correctly: see the duration quirk above — play the preview once first. Output JSON is too large: lower FPS to 8-10 and max width to 320-480px. Transparency disappeared: make sure WebP output is selected, not JPEG — JPEG has no alpha channel and flattens transparent areas to white. Colors look banded: raise WebP quality above 80%, especially for recordings with smooth gradients.

Round-tripping and sharing your result

Once you have the Lottie JSON, the rest of the HuPNG cluster covers every direction: preview-friendly GIFs for Slack and docs via Lottie to GIF, GIF sources into Lottie via GIF to Lottie, and quick shareable GIFs straight from video with Video to GIF. If the file is too large for production, run it through the Lottie Optimizer first. Everything runs client-side — no uploads, no accounts, no watermarks. See our full Lottie converter toolkit for every conversion direction in one place.