Lottie Animations: The Complete Beginner's Guide (2025)

Lottie animations are the fastest way to add professional motion to any app or website. This guide covers everything from what Lottie is to getting your first animation running in under 10 minutes.

---

What Is Lottie?

Lottie is an open-source animation format created by Airbnb which renders Adobe After Effects animations natively in browsers and mobile apps.

Why it's popular: A 3-second loading spinner is typically 10–30KB as Lottie, vs 300KB+ as a GIF. Vector-based so it looks sharp on any screen density.

---

Step 1: Find an Animation

• LottieFiles — the largest free Lottie library
• Custom — export from After Effects using Bodymovin plugin

---

Step 2: Preview Before Using

Always preview in IconKing:

• See exact colors, timing, bounds
• Edit colors to match your brand
• Convert to .lottie for 75% smaller file

---

Step 3: Add It to Your Project

Plain HTML:

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

React:

npm install lottie-react

import Lottie from 'lottie-react';
import loading from './loading.json';
<Lottie animationData={loading} loop style={{ width: 200 }} />

---

Performance Rules

1. Pause off-screen animations
2. Avoid 10+ simultaneous animations
3. Use .lottie format — 75% smaller
4. Destroy animations on component unmount

---

Summary

1. Get a file from LottieFiles or designer
2. Preview and edit at IconKing
3. Use the appropriate wrapper for your platform
4. Control with play(), pause(), setSpeed()
5. Convert to .lottie at IconKing for 75% smaller files