Lottie viewer: play the animation, step through its frames, save one as PNG
Drop a Lottie .json, a dotLottie .lottie or a Telegram .tgs sticker. It plays here with play, pause, loop, 0.25× to 2× speed and a scrubber that shows the frame number. Beside it: the size, frame rate, frames and duration, the Lottie version, every layer, image, font and marker. Save the current frame as a PNG, on a transparent, white or black background.
The file is read by this tab on your device and is not uploaded, so a client’s unreleased animation goes nowhere.
What it shows
- The animation, frame by frame. It plays in a canvas with the open-source lottie-web player (version 5.13.0, its canvas build), copied onto this site. Pause it and drag the scrubber to any frame; the label shows the frame number and its time. Speeds from 0.25× (to watch an ease) to 2×; loop on or off. Motion is not started automatically if your device asks for reduced motion.
- The numbers a developer asks for. A Lottie file is one JSON object, and its top level says it plainly:
"w"and"h"are the size in pixels,"fr"the frames per second,"ip"and"op"the first frame and the frame it stops at. The duration is (op − ip) ÷ fr:"ip":0,"op":90,"fr":30plays 90 frames, 3 seconds."v"is the version of the exporter that wrote it, such as 5.7.4. - Every layer. Name, type (shape, precomp, solid, image, null, text and the rest), the frames it is on screen and its parent, then the precomps nested inside with their layer counts, and the markers (named frame ranges apps use to play one part, such as “hover” from frame 0 for 30 frames).
- Images and fonts. Each image as inside the file (a base64
data:URI) or not inside: Bodymovin by default writesimages/img_0.pngbeside the .json, and the .json alone then plays with holes. Each font the text uses, and whether the file carries the glyph outlines (then the text looks exact everywhere) or only the font’s name. - Save frame as PNG. The PNG is the animation’s own width × height, whatever size it is shown at, with a transparent background unless you picked white or black.
- dotLottie bundles. A .lottie is a ZIP:
manifest.json, the animations as JSON (animations/in dotLottie 1,a/in dotLottie 2) and their images (images/ori/). Every animation in it can be picked and played, its images are listed with the animation that uses them, and Save as plain .json gives a single Lottie JSON with those images embedded, for a player or tool that does not read .lottie.
What it cannot do
- It does not run expressions. After Effects expressions (a wiggle, a loopOut, a link to a slider) are JavaScript stored in the file. Running them would let any file someone sent you run code in this page, so the player used here is lottie-web’s build without the expression engine, and keyframed values play instead. The page counts how many properties use an expression, so you know when what you see differs from an app that runs them.
- Fonts come from your device. Text that names a font but carries no glyph outlines uses that font only if it is installed here; otherwise the browser substitutes one and line lengths can change. Font links in the file (Google Fonts, Typekit, a URL) are not loaded.
- Most layer effects are not drawn. lottie-web’s canvas renderer draws shapes, masks, mattes, images, text and precomps, but skips most After Effects effects (blur, glow, drop shadow). The same file in an app using lottie-web’s SVG mode can show a few of them.
- Images that are not inside the file stay empty. The page will not fetch
images/img_0.pngfrom anywhere. Re-export with images embedded, or zip the .json and its images as a .lottie. - No editing or conversion. Colours, text and timing cannot be changed, and there is no export to GIF, MP4 or WebM. dotLottie 2 state machines and themes (
s/,t/) are listed among the files but not run: each animation plays as exported.
Useful to know about Lottie files
- Where Lottie files come from
- Most are exported from Adobe After Effects with the Bodymovin plug-in, which is where the format started; Figma and Canva plug-ins, Rive-to-Lottie converters and LottieFiles’ own editor write them too. Apps play them with lottie-web, lottie-android, lottie-ios or the dotLottie players, which is why designers hand developers a .json instead of a video: it stays sharp at any size and is often a few tens of kilobytes.
- .json or .lottie?
- The same animation. A .lottie is the JSON (plus its images and a manifest) in a ZIP, so it is usually several times smaller and carries its images with it. Rename a .lottie to .zip and any unzip tool shows the JSON inside; this page does that for you and saves it.
- Telegram animated stickers (.tgs)
- A .tgs is one Lottie JSON compressed with gzip. Telegram asks for 512 × 512 pixels, 60 frames per second, at most 3 seconds and at most 64 KB after compression; this page shows the first three of those for any sticker you drop.
- “It plays in one app but not another”
- Usually one of three things: an expression (run by After Effects and by lottie-web’s full build, ignored by mobile players), an effect the player does not draw, or an image or font left outside the file. The counts on this page show which of those the file has.
- The JSON page shows the same file as a tree
- To look at the raw keys of a Lottie, drop it on the JSON viewer: it opens there as a searchable tree, with a link back to this player.