DEV Community

Fazal Shah
Fazal Shah

Posted on

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 in 2017. It renders Adobe After Effects animations natively in browsers and mobile apps — as smooth vectors, not GIFs or videos.

Why it's popular:

  • A 3-second loading spinner is typically 10–30KB as Lottie, vs 300KB+ as a GIF
  • Vector-based — looks sharp on any screen density (including 4K and Retina)
  • Scriptable — play, pause, loop, seek, change speed, change colors
  • Works in React, Vue, Angular, iOS, Android, Flutter, and plain HTML

Who made it possible: Lottie files are .json files exported from After Effects using a plugin called Bodymovin. In 2022, the newer .lottie (dotLottie) format was introduced — a compressed binary format that's 75% smaller.

Step 1: Find an Animation

Before writing any code, you need a Lottie file. The main sources:

  • LottieFiles — the largest free Lottie library. Search by keyword, download .json or .lottie.
  • IconScout — free and premium Lottie animations
  • Custom — have a designer export from After Effects using the Bodymovin plugin

Step 2: Preview Before Using

Don't skip this step. Always preview a Lottie file in IconKing before adding it to your project:

  • See exactly how it renders (colors, timing, bounds)
  • Edit colors to match your brand without touching After Effects
  • Convert .json → .lottie format for 75% smaller file size
  • Check that all layers render correctly

Takes 30 seconds. Saves hours of debugging.

Step 3: Add It to Your Project

Plain HTML / Vanilla JS 

<!-- Add the lottie-player web component -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!-- Use it in your HTML -->
<lottie-player
  src="https://assets10.lottiefiles.com/packages/lf20_your-animation.json"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px;"
  loop
  autoplay>
</lottie-player>
Enter fullscreen mode Exit fullscreen mode

Or use lottie-web directly:

<div id="animation"></div>

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

React 

npm install lottie-react
Enter fullscreen mode Exit fullscreen mode 
import Lottie from 'lottie-react';
import loadingAnimation from './loading.json';

export default function Loading() {
  return <Lottie animationData={loadingAnimation} loop={true} style={{ width: 200, height: 200 }} />;
}
Enter fullscreen mode Exit fullscreen mode

Vue 3 

npm install vue3-lottie
Enter fullscreen mode Exit fullscreen mode 
<script setup>
import animData from './animation.json'
</script>

<template>
  <Vue3Lottie :animationData="animData" :height="200" :width="200" />
</template>
Enter fullscreen mode Exit fullscreen mode

The Two Lottie Formats: .json vs .lottie

.json (Lottie JSON) .lottie (dotLottie)
File size Larger (text) ~75% smaller (compressed binary)
Browser support Universal Needs dotLottie library
Tooling Universal Growing (recommended for new projects)
Multiple animations No Yes (one file, multiple scenes)

Recommendation: Use .json for maximum compatibility. Use .lottie when file size matters (mobile apps, slow connections). Convert between formats at IconKing.

Key Concepts

Renderer

Lottie supports three renderers:

  • SVG (default for web) — best quality, most compatible
  • Canvas — faster for many simultaneous animations
  • HTML — CSS-based, limited feature support

For most projects, stick with SVG.

The lottie-web API 

const anim = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animation.json'
});

// Control playback
anim.play();
anim.pause();
anim.stop();
anim.setSpeed(2);       // 2x speed
anim.setDirection(-1);  // reverse
anim.goToAndPlay(30);   // jump to frame 30 and play
anim.destroy();         // clean up
Enter fullscreen mode Exit fullscreen mode

Events 

anim.addEventListener('complete', () => {
  console.log('animation finished');
});

anim.addEventListener('loopComplete', () => {
  console.log('one loop done');
});
Enter fullscreen mode Exit fullscreen mode

Changing Colors at Runtime

The easiest way to change Lottie colors without After Effects is IconKing — open the file, click a color swatch, change it, download.

For runtime color changes in code, use the addValueCallback API (lottie-web) or setValueProvider (lottie-ios). The approach varies by platform — see the platform-specific guides:

Performance Rules

  1. Pause off-screen animations — running animations consume CPU/GPU even when not visible
  2. Avoid 10+ simultaneous animations — especially on mobile
  3. Use .lottie format — 75% smaller = faster load
  4. Limit canvas size — don't render a 1000×1000 animation in a 50×50 box
  5. Avoid After Effects effects that Lottie doesn't support — Gaussian blur, certain blend modes, 3D layers

What Lottie Does NOT Support

A few After Effects features don't translate to Lottie:

  • Raster images (sort of — can be embedded but increases file size dramatically)
  • 3D layers
  • Some blend modes
  • Expressions that reference external data

If your animation uses these, check Lottie's supported features list before committing.

Common Beginner Mistakes

1. Not previewing first

Always open the file in IconKing before adding it to your code. A file that looks great in After Effects may have broken layers, wrong colors, or unexpected bounds in Lottie.

2. Using GIF instead of Lottie

GIFs are 10–30× larger, not scalable, and have poor color support (256 colors max). There's almost never a reason to use GIF if you can use Lottie.

3. Forgetting to stop the animation

Every running animation consumes resources. Always stop or pause animations when they go off-screen.

4. Wrong file in res/raw/ (Android) or bundle (iOS)

The file must be copied to the right location. Use IconKing to verify the file is valid before debugging your build setup.

The Ecosystem

Tool Purpose
LottieFiles Find and share Lottie animations
IconKing Preview, edit colors, convert formats
lottie-web Web renderer (vanilla JS)
lottie-react React wrapper
vue3-lottie Vue 3 wrapper
lottie-android Android renderer
lottie-ios iOS renderer
lottie-flutter Flutter renderer

Summary

  1. Get a .json or .lottie file from LottieFiles or your designer
  2. Preview and edit it at IconKing before writing code
  3. Use the appropriate wrapper for your platform
  4. Control playback with play(), pause(), stop(), setSpeed()
  5. Listen to complete event to chain animations or trigger UI state
  6. Convert to .lottie at IconKing for 75% smaller files
  7. Always stop/pause animations when they go off-screen

Top comments (0)