EasyLottie

EasyLottie Guide

How to Convert a GIF to Lottie (Free, in Your Browser)

You have an animated GIF and need to play it through a Lottie runtime. Here is how to convert it in the browser for free - and what a raster source does and does not give you.

By EasyLottie Editorial TeamReviewed 3 min readReport a correction
Video to Lottie step 2 with an opaque UI GIF loaded and Keep original background selected
Step 2 with the 480ร—270 UI GIF loaded. Its picture is opaque, so no background colour is detected and Keep original background stays selected.
Finished Lottie ZIP preview converted from the GIF, with its size and download button
The Lottie ZIP made from the GIF: 186,991 bytes for 96 frames at 480ร—270.

Why convert a GIF to Lottie

Convert a GIF when your project needs Lottie playback controls or an image-sequence package. GIF has a limited palette and binary transparency. Wrapping its frames in Lottie does not recover colors, detail, or soft alpha already lost in the source, and it does not guarantee a smaller file.

EasyLottie converts a GIF in the browser - nothing is uploaded - into a Lottie ZIP, a WebM, a GIF, or a PNG sequence, whichever suits your target.

Step-by-step: GIF to Lottie

The Video to Lottie tool accepts GIF alongside MP4, MOV, WebM, and image sequences.

  1. Open the Video to Lottie tool and drop your .gif in.
  2. If you only need part of a GIF loop, shorten it before uploading; this tool processes the full GIF range.
  3. Optionally remove a solid background with the built-in chroma keyer for transparency.
  4. Choose the output: Lottie ZIP, WebM, GIF, or PNG sequence. Check the actual export and target player.
  5. Export and download - all processed locally in your browser.

What to expect: raster vs true vector

A GIF is made of pixels, not shapes, so the resulting Lottie is an image-sequence (raster) Lottie - it carries the frames inside the Lottie container. It requires a player that supports the exported image assets and their paths. It keeps a fixed raster resolution; a Lottie container does not make it a small, infinitely scalable vector animation. If you need a true vector Lottie, the source has to be vector to begin with - for example a vector animation authored for a compatible Lottie exporter.

Getting transparency from a GIF

GIF transparency is 1-bit - a pixel is either fully opaque or fully transparent, which is why GIFs often have jagged edges. If your GIF has a solid background you want to drop, use the built-in green-screen/solid-color keyer to remove it, then test Lottie ZIP or PNG sequence for alpha. WebM export can lose transparency even when the browser supports WebM; inspect the downloaded file on light and dark backgrounds. Keying cannot recreate missing detail from the original GIF.

Quick checklist

  • Drop the .gif into Video to Lottie - nothing is uploaded.
  • Trim to the frames you actually need.
  • Key out a solid background if you want transparency.
  • Compare actual Lottie ZIP, WebM, GIF, or PNG sequence exports.
  • For a true vector Lottie, start from a vector source instead.

Reproduce the workflow

Use these local sample files to repeat the checks described in this guide. Review the file before using it in a production project.

Tested: what a GIF becomes after conversion

We converted one opaque UI GIF to Lottie ZIP at 480 px and 24 fps with the public converter, then converted the MP4 it was made from with identical settings.

Measured results from the downloadable test files
FileSizeWhat we observed
Source GIF69,284 bytes96 frames, palettes of up to 256 colours; the picture is opaque (its transparency index only skips unchanged pixels between frames)
Lottie ZIP from the GIF186,991 bytes2.7ร— the GIF; 96 PNG frames; first frame 100% opaque
Lottie ZIP from the MP4187,773 bytesWithin 0.4% of the GIF result at the same size and frame rate

Converting did not make the animation smaller: the Lottie ZIP was 2.7 times the GIF. A palette-optimised GIF is already a compact format for flat graphics.

The output size depended on the output frames and dimensions, not on the source format: the GIF and the MP4 of the same animation produced Lottie ZIPs within 1% of each other.

An opaque GIF stays opaque. All 129,600 pixels of the first output frame were fully opaque, so transparency has to come from keying a solid background, not from the conversion itself.

Convert when you need what a Lottie player gives you, such as play, pause, speed and loop control in an app, not to save bytes.

Know the limits

  • One synthetic UI animation measured once in desktop Chrome; a GIF with photographic content or dithering noise will behave differently.
  • Colours, banding and hard edges already present in the GIF are carried into every PNG frame. Conversion cannot restore them.
  • GIF frame delays are whole hundredths of a second. Our source GIF stores 24 fps (41.7 ms per frame) as 80 frames of 40 ms and 16 of 50 ms, so the timing you start from is already an approximation.

If your result is different

  1. 1.If the Lottie ZIP is much larger than the GIF and you do not need player controls, keep the GIF.
  2. 2.If edges look jagged after keying, the hard edge was already in the GIF. Convert from the original video instead if you have it.
  3. 3.If your Lottie player shows blank frames, check that it supports image assets and that the images/ folder stayed next to the JSON.

Frequently asked questions

Can I convert a GIF to Lottie for free?

Yes. EasyLottie converts a GIF to a Lottie ZIP (and other formats) for free in your browser, with no signup and nothing uploaded.

Will the Lottie be a small vector file?

No. A GIF is raster, so the result is an image-sequence Lottie. A true vector Lottie requires a vector source such as an animated SVG.

How do I make the background transparent?

Use the built-in keyer to remove a solid background, then export Lottie ZIP or PNG sequence and inspect the exported alpha. WebM transparency depends on the encoder and player and must be tested.

What formats can I export?

Lottie ZIP, WebM, GIF, or a PNG sequence. The output size and alpha result depend on the source and format.

Primary sources

Technical behavior was checked against the original runtime or format documentation below.