Documentation

Use the converter for a sequence of images, or the editor to give a single SVG motion. Already have a Lottie? Preview it or open it in the editor.

Combine PNG, JPG, WebP, or SVG images into a frame-by-frame Lottie animation.

1. 1.

   Choose your images

   Drop your files or choose images. Frames start in natural filename order, so frame-2 comes before frame-10.

2. 2.

   Arrange and configure

   Open the sequence to reorder or remove frames. Set the frame rate and output dimensions, then choose looping or reverse playback.

3. 3.

   Convert and check

   Convert the frames, then play or scrub the preview. After changing frames or settings, convert again to update the output.

4. 4.

   Keep your animation

   Download the Lottie JSON, open it in the editor, or save it to your account.

Image frames stay raster. A single animated SVG follows a separate server conversion path; it is not treated as an image sequence.

Starting with an SVG? Compare the three SVG-to-Lottie workflows, try an example, and check which animation features are supported.

Open a .json or .lottie file to check its playback and inspect its dimensions, duration, frame rate, and file size.

1. 1.

   Open your file

   Drop a Lottie or choose Open Lottie. Use the playback controls to play or pause the animation.

2. 2.

   Check the details

   Try different preview backgrounds and inspect the file information. Open it in the editor to make changes, or download it as JSON.

Changing the preview background changes how you view the animation. It does not add a background to your file.

Start with one .svg, .json, or .lottie file up to 20 MB. You can also try the sample before opening your own artwork.

1. 1.

   Add a little motion

   Choose a preset such as Spin, Scale up, Pulse, Bounce, or a slide. Adjust its duration and repeat setting where available.

2. 2.

   Make it your own

   Select a layer on the canvas or in the layer list. Adjust its position, scale, rotation, and available colors in Design mode.

3. 3.

   Fine-tune the timing

   Switch to Animate mode to work with keyframes. Scrub the timeline, move keys, and adjust their values and easing.

4. 4.

   Export or save

   Export Lottie JSON, dotLottie, GIF, a WebP frame-sequence ZIP, or a sprite sheet. Use Save to account to keep the Lottie online.

SVG imports automatically separate contours inside a shared group. Animate the group to move the artwork together, or select a contour to animate one part. Holes stay with their outlines. To morph an SVG, select a shape, upload a target SVG under Shape morph, then set its duration and easing. Enable “Return to starting shape” for a round trip. Morphs export as editable Lottie path keyframes.

Use “Edit points” to drag vertices and Bézier handles on the canvas, or enter their coordinates in Path points. Static paths can insert and delete points. Editing an animated path reshapes its poses while keeping its timing and point count. Ask AI can reshape exposed outlines directly, including automatically converting supported SVG artwork into editable shapes. Select a layer to limit the edit to that artwork.

Editable SVG paths support solid fills and strokes. Gradients, masks, text and images stay embedded; outline text and simplify effects before converting. Morphs match nearby contours and holes automatically. Extra contours shrink away or grow from a point, so source and target contour counts can differ. The editor keeps a local draft when browser storage is available; export or save to account to keep a separate copy. GIF exports use a white background.

Reduce file sizes or change formats before using images in a project. Processing stays in your browser.

1. 1.

   Choose your images

   Drop one or more files. Common inputs include PNG, JPG, WebP, and HEIC/HEIF.

2. 2.

   Choose the output

   Select WebP, JPEG, PNG, or the original format. Adjust quality and maximum dimensions as needed.

3. 3.

   Compress and download

   Choose Compress Images, check the results, and download files individually or together as a ZIP. You can also save the ZIP to your account.

JPEG does not preserve transparency. Keep PNG or use WebP when you need a transparent background.

Downloading keeps a file on your device. Saving to your account uploads the exported file so you can come back to it later.

1. 1.

   Choose Save to account

   Use it after converting, previewing, editing, or compressing. Sign in or create an account when prompted.

2. 2.

   Find it in Account

   Open Account from the sidebar to see your saved files. Preview or edit supported animations, download a copy, or delete files you no longer need.

Each account file can be up to 4 MB. Larger files can still be downloaded to your device. A local editor draft belongs to this browser and is separate from your account files.

Export Lottie JSON and place it in your project’s public folder as animation.json. Install the player with npm install lottie-web.

import lottie from 'lottie-web';

// Add <div id="animation"></div> to your page.
// Give it a width and height in your stylesheet.
const container = document.getElementById('animation');

if (container) {
  lottie.loadAnimation({
    container,
    renderer: 'svg',
    path: '/animation.json',
    loop: true,
    autoplay: true,
  });
}

import { useEffect, useRef } from 'react';
import lottie from 'lottie-web';

export default function Animation() {
  const container = useRef(null);

  useEffect(() => {
    if (!container.current) return;
    const animation = lottie.loadAnimation({
      container: container.current,
      renderer: 'svg',
      path: '/animation.json',
      loop: true,
      autoplay: true,
    });
    return () => animation.destroy();
  }, []);

  return <div ref={container}
    style={{ width: 300, maxWidth: '100%', height: 300 }} />;
}

These examples use JSON. For playback controls and other setup options, see the lottie-web documentation.

Need a hand? Send feedback. Read more about file handling in our privacy notice.