See how your Lottie really renders — in both engines

Why the same Lottie looks different in different apps

There is no single Lottie engine. The format is a JSON description of an After Effects composition, and every platform renders it with its own independent implementation of that description. On the web that is usually lottie-web, the original Airbnb runtime. On iOS, Android, Flutter, and anywhere dotLottie is used, it is usually ThorVG.

Those two were written by different people, at different times, from the same informal spec. They agree about the overwhelming majority of what a Lottie can express — and disagree about a short list of edge constructs. Nothing warns you: the file is valid, both engines load it, and it simply looks different in the app than it did in the browser you designed it in.

That is what this page is for. Your file is played by both engines at once, driven by one playhead, so the two panes are always showing the same frame. If they look different, that difference is real.

Which runtime does what

• lottie-web — the reference implementation, and what a <lottie-player> or a React/Vue wrapper runs on a web page. Renders to SVG (or canvas). If you ship to the web, this is your target.
• ThorVG — a C++ vector engine compiled to WebAssembly here, and the engine inside dotlottie-web, the dotLottie players, and the iOS, Android and Flutter runtimes. If you ship to an app, this is your target.

Known divergences, and how to fix them

Trim on a repeater (tm.m: 2)

A Trim Paths modifier placed after a Repeater has a “Trim Multiple Shapes” setting. Set to Individually (m: 2), lottie-web sweeps the trim window across the repeated copies one after another — the staggered draw-on effect that makes the setting worth using. ThorVG does not implement that sweep, so it trims every copy by the same amount at once and plays the whole thing lockstep.

The fix is to stop relying on the runtime to stagger: bake the repeated copies into real, separate shapes, each with its own trim. Both engines then render identical output because there is no repeater left to interpret. LottieMake's editor does this from Modifiers → Bake to portable shapes. This page flags the construct automatically when your file contains it.

Drop shadows

After Effects can export a drop shadow two ways — as a layer effect (ef with ty: 25) or as a layer style (sy). Neither lottie-web nor ThorVG implements the layer-style form, so a shadow authored that way silently disappears in both. If your shadow vanished, this is usually why.

Track mattes

Alpha and luma mattes are widely supported but are a common source of subtle difference, particularly where a matte layer is itself animated or sits inside a pre-composition. Worth scrubbing frame by frame here rather than trusting a single still.

How to open a .lottie file

A .lottie file is a ZIP archive. Inside it are a manifest.json, one or more Bodymovin animations under animations/, and any images the animation uses. Renaming it to .zip and unzipping it works, but you still need something that can play the JSON inside.

Simpler: drop it here. The archive is unpacked in your browser, external images are inlined automatically, and if it holds more than one animation you are asked which to view. Nothing is uploaded to unpack it.

Frequently asked questions

Edit it, don't just look at it

LottieMake is a free, client-side Lottie editor — import an SVG or an existing Lottie, animate it on a real timeline, and export clean Bodymovin JSON, dotLottie or GIF. No install, no account, and your files never leave your browser.