How to Convert GIF to Lottie JSON for Web — Developer Guide 2026

GIF and Lottie are fundamentally different animation formats. GIF is a raster format — pixels arranged in frames. Lottie is a vector format — mathematical curves animated with keyframes. Converting between them is like converting a photograph into a vector illustration: possible, but the result depends on the source material.

This guide covers the practical approaches, their tradeoffs, and when you should (and shouldn't) attempt this conversion.

Key Takeaways

• There is no lossless GIF-to-Lottie converter — GIF is raster, Lottie is vector
• Best approach: recreate the animation in After Effects or Figma, then export as Lottie
• Automated tools (gif2lottie) embed GIF frames as base64 images inside the JSON — not true vector
• True Lottie benefits (scalability, tiny file size, interactivity) only come from vector source art
• For simple icons and UI animations, manual recreation in Lottie is worth the effort

Why Convert GIF to Lottie?

The file size difference is the most compelling. A loading spinner GIF might be 100 KB; the same animation as Lottie JSON is 3 KB.

Approach 1: Automated Conversion (Quick but Limited)

gif2lottie / GIF to Lottie Tools

Several online tools claim to convert GIF to Lottie. What they actually do is embed each GIF frame as a base64-encoded PNG inside the Lottie JSON file. The result is technically valid Lottie, but:

• File size is larger than the original GIF (base64 encoding adds ~33%)
• No scalability benefit — still raster frames
• No interactivity beyond play/pause
• You lose all the advantages of Lottie

This approach is useful only when you need Lottie format for a platform that doesn't accept GIF (like certain app frameworks or design tools).

How It Works

# Using gif2json npm package (embeds frames as base64)
npm install -g gif2json
gif2json input.gif --output output.json

Or use LottieFiles' converter at lottiefiles.com — upload a GIF, get a Lottie JSON with embedded raster frames.

Approach 2: Recreate in After Effects (Best Quality)

The proper way to get a Lottie animation from a GIF concept is to recreate it as vector art in After Effects, then export using the Bodymovin plugin.

Step 1: Analyze the GIF

Open your GIF and identify:

• What shapes are moving? (circles, rectangles, paths)
• What properties are animating? (position, scale, rotation, opacity)
• What's the timing? (duration, easing curves)

Step 2: Recreate in After Effects

Use shape layers (not raster images) to rebuild the animation:

1. Create a new composition matching the GIF dimensions
2. Build each element as a shape layer
3. Add keyframes for position, scale, rotation, opacity
4. Match the timing and easing from the original GIF

Step 3: Export with Bodymovin

1. Install the Bodymovin extension for After Effects
2. Window → Extensions → Bodymovin
3. Select your composition
4. Set render settings (Standard for web)
5. Click Render — outputs a .json file

{
  "v": "5.12.2",
  "fr": 30,
  "ip": 0,
  "op": 60,
  "w": 200,
  "h": 200,
  "layers": [...]
}

The resulting JSON is typically 5-50 KB — 10-100x smaller than the original GIF.

Approach 3: Recreate in Figma + LottieFiles Plugin

Figma's animation capabilities, combined with the LottieFiles plugin, offer a designer-friendly alternative to After Effects.

1. Design the animation frames/states in Figma
2. Use Smart Animate for transitions between frames
3. Install the LottieFiles plugin for Figma
4. Export the animation as Lottie JSON

This works best for UI animations, micro-interactions, and simple icon transitions.

Approach 4: Use Rive (Alternative to Lottie)

Rive is a newer animation tool that directly supports importing raster images and tracing them to vector. It's worth considering if:

• You're starting a new project (not locked into Lottie)
• You need state machines (interactive animations)
• Your animations are complex and benefit from Rive's editor

Integrating Lottie on the Web

React (lottie-react)

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

function LoadingSpinner() {
  return <Lottie animationData={animationData} loop={true} />;
}

Vue (vue-lottie)

<template>
  <LottieAnimation :animation-data="animationData" :loop="true" />
</template>

<script setup>
import LottieAnimation from 'lottie-web-vue';
import animationData from './animation.json';
</script>

Vanilla JS (lottie-web)

<div id="lottie-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<script>
lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/loading.json'
});
</script>

dotlottie (Modern, Smaller)

The .lottie format (dotlottie) compresses JSON with gzip, reducing file size by 50-70%:

<script src="https://unpkg.com/@dotlottie/player-component/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="/animations/loading.lottie" background="transparent" speed="1" loop autoplay></dotlottie-player>

When NOT to Convert GIF to Lottie

• Photographic content: GIFs with real-world footage can't be vectorized
• Complex illustrations: Highly detailed artwork with gradients and textures
• Memes and reaction GIFs: Keep as GIF or convert to MP4 for smaller files
• One-time use: If the animation appears once and doesn't need scaling or interactivity

When to Convert GIF to Lottie

• UI animations: Loading spinners, success checkmarks, toggle switches
• Icons: Animated icons that need to scale across different screen sizes
• Onboarding: Step-by-step animated illustrations
• Marketing: Animated logos, product feature demos
• Any animation that repeats across your app and benefits from tiny file size

Finding Pre-Made Lottie Animations

Before recreating a GIF as Lottie, check if a similar animation already exists:

• LottieFiles — Largest library of free Lottie animations
• IconScout — Animated icons in Lottie format
• LordIcon — Animated icon library with Lottie export

Searching these libraries is often faster than recreating a GIF animation from scratch.

FAQ

Can I automatically convert any GIF to a true vector Lottie?

No. Automated tools embed GIF frames as raster images inside the Lottie JSON, which defeats the purpose. True vector Lottie requires recreating the animation with shape layers in After Effects, Figma, or a similar tool. AI-assisted vectorization tools are improving but still can't handle complex animations reliably.

Is Lottie smaller than GIF?

For vector animations, yes — dramatically. A vector Lottie file is typically 5-50 KB versus 100 KB - 5 MB for the equivalent GIF. However, a Lottie with embedded raster frames (from automated conversion) is actually larger than the original GIF due to base64 encoding overhead.

What's the difference between Lottie JSON and dotlottie?

Lottie JSON is the raw animation data in JSON format. dotlottie (.lottie) is the same data compressed with gzip inside a ZIP container, typically 50-70% smaller. Both are supported by modern Lottie players. Use dotlottie for production to reduce bandwidth.

Can I use Lottie without After Effects?

Yes. Figma + LottieFiles plugin, Rive, Haiku Animator, and even manual JSON editing can produce Lottie files. After Effects + Bodymovin is the most powerful option but not the only one. For simple animations, the LottieFiles web editor lets you create Lottie directly in the browser.

Should I replace all GIFs with Lottie on my website?

No. Replace only UI animations (spinners, icons, micro-interactions) and animations that need to scale. Content GIFs (memes, screen recordings, product demos) are better served as MP4 video — smaller files, better quality, and no development effort.

Conclusion

GIF-to-Lottie conversion isn't a simple format transformation — it's a recreation process. Automated tools that embed raster frames miss the point entirely. The real value of Lottie comes from vector-based animations that are tiny, scalable, and interactive.

For simple UI animations, invest the time to recreate them properly in After Effects or Figma. For content GIFs (memes, recordings, demos), convert to MP4 instead — use GifToVideo.net for instant browser-based conversion.

Sources

• LottieFiles, "What is Lottie?" retrieved 2026-05-18, https://lottiefiles.com/what-is-lottie
• Airbnb Engineering, "Introducing Lottie," retrieved 2026-05-18, https://airbnb.design/lottie/
• Bodymovin Documentation, GitHub, retrieved 2026-05-18, https://github.com/airbnb/lottie-web
• dotlottie Specification, retrieved 2026-05-18, https://dotlottie.io