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. Under Where it goes, pick a destination to use its format and limits. Choose File type if you want to pick a format yourself.

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 animation file is rendered on your device and saved with your downloads. Account sync and library download checks may use our server.

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

Export Lottie JSON and check it in your mobile player. Support varies by player and animation. Use Lottie for iOS or Android, lottie-react-native for React Native, or the lottie package for Flutter. dotLottie players read the compressed .lottie format.

Use it in a video editor

For a video editor, choose Video editor, see-through to get PNG frames. Unzip the file and import the frames as an image sequence if your editor supports it. Transparent WebM puts the animation in one file. Check it in the browser or editor that will play it, because WebM playback does not always preserve transparency.