# Download Lottie animations from a website

> Save the Lottie JSON, .lottie and Rive files a website plays, with a free asset extractor or Chrome DevTools, then play them and check the license.

Canonical page: https://sitepeel.dev/guides/download-lottie-from-website/

Paste the link into a free asset extractor to list the Lottie and Rive files a page loads, or find them in the DevTools Network panel.

Published: 2026-10-27

Tool used in this guide: [Image downloader extension](https://sitepeel.dev/image-downloader-chrome-extension/index.md)

Free website tool for this task: [Asset extractor](https://sitepeel.dev/free-tools/asset-extractor/index.md) (https://sitepeel.dev/free-tools/asset-extractor/)

## In short

- Lottie comes as a .json file or a .lottie file, a zip with the JSON inside
- Many animations load only when you scroll to them, so scroll first
- Some sites bundle the animation into their JavaScript: then there is no file to save
- Animations belong to their makers: check the license before you reuse one

## How to use it

1. **Paste the link** Paste the page’s link into the free asset extractor. Sitepeel opens the page, scrolls it and lists every file it loads.
2. **Open the Animations tab** Lottie JSON, .lottie and .riv files are listed there. Most are marked hidden, because a script loads them.
3. **Download the files** Open a file to see where it was found and its address, then download it, or press ZIP for all of them.
4. **Play it** Drop the file into a Lottie viewer, or play it on your own page with lottie-web or dotlottie-web.

## Lottie, dotLottie and Rive files

Animation files websites load, and what plays them

| File | What it is | Play it with |
| --- | --- | --- |
| .json (Lottie) | Layers, shapes and keyframes as JSON, often exported from After Effects with Bodymovin | lottie-web, Lottie viewers |
| .lottie (dotLottie) | A zip with a manifest.json, one or more Lottie animations and their images | dotlottie-web, Lottie viewers |
| .riv (Rive) | The file Rive exports for its runtimes, often with states that react to hover and clicks | A Rive runtime |

Good to know: Some Lottie JSON files load their pictures from separate image files. Save those too, or the animation plays without them.

## What the asset extractor finds

It spots Lottie JSON by its content, so oddly named files still show up, and .lottie and .riv files by their address. On Headspace it found 15 Lottie JSON files and on LottieFiles over 20 .lottie files, each one downloadable.

![The asset extractor found 133 files on headspace.com, with the Animations tab open on 15 Lottie JSON files such as Lottie-DeepDive-Sleep.json.](https://sitepeel.dev/images/guides/shots/asset-extractor-lottie.webp)

The free asset extractor on headspace.com: 15 Lottie animations, each its own JSON file.

- Files a script loads late, after the page settles, can be missed. Check DevTools for those.
- Animations that start only on a click or hover may not load at all.
- If a download fails, press Open original to get the file from the site itself.

## Find animation files in DevTools

- Open DevTools, go to Network, tick Disable cache and reload the page.
- Scroll to each animation: many load only when they come into view.
- Type `json`, `lottie` or `riv` in the filter box.
- A Lottie JSON has top-level keys like `"v"`, `"fr"`, `"w"` and `"layers"`. Check it in the Preview tab.
- In Elements, look for a `src` on `<lottie-player>`, `<dotlottie-player>` or `<dotlottie-wc>`.
- Right-click the request, choose Open in new tab, then save the file.

Tip: Nothing in Network? Search the page’s scripts for `animationData`: the animation is built into the JavaScript.

## Turn a .lottie file into JSON

A .lottie file is a zip archive, so any unzip tool opens it.

- Rename a copy from `.lottie` to `.zip` and unzip it.
- The animation JSON is in the `animations` folder (`a` in newer files).
- Pictures it uses are in `images` (`i` in newer files).
- `manifest.json` lists the animations and how they play.

## Can you reuse a downloaded animation?

A site’s own animations belong to its owner or the studio that made them, so ask first. Free animations on LottieFiles come with the Lottie Simple License, which allows commercial use; read the terms of anything else before you ship it.

## Questions and answers

### How do I download an animation from a website?

If it is a Lottie or Rive animation, the page loads it as a file. Paste the link into a free asset extractor and open the Animations tab, or find the .json, .lottie or .riv request in the DevTools Network panel.

### What is the difference between Lottie JSON and .lottie?

A .lottie file (dotLottie) is a zip holding one or more Lottie JSON animations, their images and a manifest, so it is usually smaller. lottie-web plays JSON; dotlottie-web plays both.

### Why can’t I find the Lottie file in the Network tab?

It may load only when you scroll to it, come from the cache, or be built into a JavaScript file. Tick Disable cache, reload, scroll to the animation and filter by json.

### How do I convert a .lottie file to JSON?

Rename a copy to .zip and unzip it. The animation JSON is in the animations folder (a in newer files), with any pictures it uses in images (i).

### Can I use Lottie animations from other websites?

Only with permission. A site’s own animation belongs to its owner. Free LottieFiles animations come with the Lottie Simple License; check the terms of anything else before you use it.

## Further reading

- [Lottie docs: the JSON format](https://lottiefiles.github.io/lottie-docs/)
- [dotLottie 2.0 specification](https://dotlottie.io/spec/2.0/)
- [Rive docs: exporting for runtime](https://rive.app/docs/editor/exporting/exporting-for-runtime)
- [LottieFiles: Lottie Simple License](https://lottiefiles.com/page/license)

## Related pages

- [Download SVGs from a website](https://sitepeel.dev/guides/download-svg-from-website/index.md): Save inline SVGs, sprite icons, SVG files and CSS background SVGs from any website, step by step, with Chrome DevTools or a free online asset extractor.
- [Download videos from a website](https://sitepeel.dev/guides/download-video-from-website/index.md): Download a video from a website four ways: Save video as, a free video downloader, Chrome DevTools or ffmpeg for streams. Plus what to do for YouTube and Vimeo.
- [Download 3D models from a website](https://sitepeel.dev/guides/download-3d-models-from-website/index.md): Find and save the GLB, glTF, USDZ and Spline files a website loads, using Chrome DevTools or a free asset extractor, and learn what you may reuse.
- [Extract website images](https://sitepeel.dev/guides/extract-images-from-website/index.md): Download a website’s images, SVGs and videos, choose the right size and see why some files won’t download. Online or with Sitepeel for Chrome.
