Lottie Animation Preview

Features

• Drop a .json and it plays; speed adjustable (0.25× / 0.5× / 1× / 2×)
• Scrubbable timeline for frame-by-frame inspection, with a current/total frame readout
• Backdrop switches between checkerboard, light and dark — the checkerboard reveals transparency
• Composition details: size, frame rate, frames, duration, layers, name, bodymovin version and generator
• Handoff checks: expressions, embedded vs linked images, high frame rate, long duration, oversized composition, old exports
• Nothing is uploaded; the player downloads only when a file is actually dropped (it is the largest dependency on the site)
• A file that is not Lottie gets a clear sentence rather than a blank panel

How to use

1. Drop the Lottie JSON onto the dashed area
2. Play, slow it down, scrub through — look at the animation itself
3. Read the composition details and handoff checks on the right
4. Use those conclusions to decide whether to re-export (bake expressions, embed images, lower the frame rate)

FAQ

Why does it say my animation uses “expressions”?

Because that is the most common porting trap. Expressions in Lottie (scripts written on properties in After Effects, stored in an `x` field) do run in a browser — this preview is the proof — but many mobile players do not support them: some react-native-lottie versions and several mini-program components do not, and the animation then freezes or sits in the wrong place while the developer suspects the player version first. To use it on those platforms, bake the expressions into keyframes in After Effects before exporting.

Why does a file with expressions ask me to confirm first?

Because Lottie expressions are JavaScript: the player has to execute them as code to compute the animation values — so a `.json` with expressions is not just data. In a text editor, in Git, it is plain text; it only runs when a player reads it, and “preview a file” feels like a read-only action, so this page does not make that call for you. Before you confirm, it is worth asking where the file came from. One you exported yourself or a colleague handed you: go ahead. One downloaded from an asset site, a group chat or an email attachment: hold on — open it in a text editor and search for `"x":`. If what follows reads like a legible expression or a suspicious blob of code, you will know. It is also worth cleaning up before you hand a file over: shipping a Lottie with expressions ships a piece of executable code along with it.

What is the difference between embedded and linked images?

Bitmaps in a Lottie live in one of two ways: embedded (turned into a data URI inside the same JSON) or linked (the JSON holds only a relative path and the images are separate files). Embedded files are self-contained and portable but large; copying a linked JSON on its own loses the images, and players usually report nothing — a few pieces simply go missing, which is easily blamed on the animation. Which to choose depends on use: small icons distributed over a CDN suit embedding, large images suit linking.

Why is a frame rate above 60 a waste?

Because most displays — phones especially — refresh at 60Hz, so frames beyond that are never shown, while Lottie writes per-frame data into the file (interpolated keyframes are computed frame by frame). The extra frames add weight and change nothing visually. 60fps is already the smooth ceiling and 30fps is plenty for most interface motion — dropping to either usually shrinks the file noticeably.

Does this preview match how it will play in a real project?

Exactly, because both use the same player: `lottie-web`, Airbnb’s official implementation. A web project uses it too; mini-programs and React Native use their own ports, and those ports are where behaviour can differ. So the most valuable use of this page is: confirm the animation itself is sound here, then validate the port on the target platform. Slowing to 0.25× is also the most effective way to inspect detail — judders, misalignment and layering problems invisible at full speed show up immediately.