Back to the blog

Animation

A .json file that moves.

A JSON animation is almost always a Lottie: shapes and keys written as text. What that means, and how to play one in your browser with nothing uploaded.

By 4 min read

A teal star on an artboard, drawn three times as it turns and grows, over a timeline with keys for its turn, size and opacity and the easing curve beside them

You have a file that ends in .json and someone called it an animation. Opened in a text editor, it is a long run of brackets and numbers. It is almost certainly a Lottie, and it plays once a player reads it.

Why an animation can be text.

Lottie is an animation format written as JSON, the text format programs use to pass data to each other. After Effects' Bodymovin plugin writes it, and so do many design and animation apps. Instead of frames, it holds layers, shapes, colours and keys, and a player draws every frame from them.

Because it is a description rather than pictures, a Lottie is usually small and stays sharp at any size. That is why apps and websites use it for icons, loaders and small illustrations.

How to open one.

Drop the .json on KeepSimp's JSON animation viewer. It plays as it is, drawn by ThorVG on your device, and nothing is uploaded. Its size, frame rate and length are shown beside it.

To read the text itself, KeepSimp's JSON formatter lays it out, with every number kept as it was written.

What you can do with it.

Make a video or a GIF of it for places that cannot play a Lottie, such as a chat or a social post. Change its colours everywhere at once. Edit its shapes and keys in the Animation maker, or save it as a dotLottie or a Telegram sticker.

Other animation files.

A .lottie file is a ZIP that holds Lotties and their pictures, and a .tgs is a Lottie compressed with gzip for Telegram. The viewer opens both.

A GIF, an animated WebP or an APNG is a different kind of file: it holds frames, not shapes. The Animation converter turns those into one another.

Further reading

Topics: json animation · json animation viewer · open json animation · animation json file · play json animation · lottie json

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool