Export and put it on your site

One project, many files. This guide covers the export window, which format to pick, and the code to put the result on a website.

Export

1. Click Export in the top bar, or press Cmd or Ctrl+E.

2. Pick a format. They are grouped as For websites and apps, Video, and Images.

3. Check the options. Depending on the format: size, frame rate, quality, how many times it plays, the background (a colour or see-through) and the file name. Mosso shows roughly how big the file will be.

4. Click Export. The file is made on your computer and saved with your downloads. Nothing is uploaded.

Which format to pick

Put it on a website

After a Lottie, dotLottie or animated SVG export, the window shows Use it on your site with tabs for HTML, React, Webflow and Framer. Copy the code for your setup. For a plain web page it looks like this: upload the file next to the page, then paste:

<div id="spinner" role="img" aria-label="Spinner"
  style="width: 100%; max-width: 400px; aspect-ratio: 400 / 400"></div>
<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie_light.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('spinner'),
    renderer: 'svg',
    loop: true,
    autoplay: !matchMedia('(prefers-reduced-motion: reduce)').matches,
    path: 'spinner.json',
  });
</script>

For React, install the player with npm install lottie-react, put the file next to your component, and use:

import Lottie from 'lottie-react';
import animation from './spinner.json';

export function Spinner() {
  return (
    <Lottie
      animationData={animation}
      loop
      role="img"
      aria-label="Spinner"
      style={{ width: '100%', maxWidth: 400, aspectRatio: '400 / 400' }}
    />
  );
}

In Webflow, open the Add panel, find Lottie animation under Media, drag it onto the page and upload your file, then turn on Loop. In Framer, open Insert, search for Lottie, drop it on the page, upload your file in its properties and turn on Loop. Both take Lottie JSON files.

Put it in an app

Lottie plays natively on phones. Add the Lottie JSON file to your project and play it with the official player for your platform: Lottie for iOS, Lottie for Android, lottie-react-native for React Native or the lottie package for Flutter. The dotLottie players for iOS and Android take the smaller .lottie file.

Use it in a video editor

For After Effects, Premiere, DaVinci Resolve and similar, export PNG frames: a zip with one see-through picture per frame, which every editor can import as an image sequence. Transparent WebM keeps the background see-through in one file; Chrome, Edge and Firefox show it that way, Safari does not, so use PNG frames or GIF there.