Fazal Shah

Posted on May 31

How to Add Lottie Animations to Your Website (Free JSON Files Included)

#lottie #animation #webdev #javascript

Lottie animations are small, crisp, and interactive. This guide covers finding free animations through production-ready implementation.

What Is Lottie?

Lottie is a JSON-based animation format from Airbnb. After Effects animations are exported via Bodymovin as small JSON files (10-100KB), rendered by a lightweight JS library.

Key advantages over GIF:

10-50x smaller file size
Resolution independent vector quality on any screen
Interactive — play, pause, seek, speed control
Full alpha transparency — no halo effects

Step 1: Get Free Lottie JSON Files

IconKing Free Lottie Library — 500+ free animations: UI icons, loaders, flags, illustrations. No account needed.

Preview any file first: iconking.net/preview — drag and drop to instantly see how it plays.

Edit colors and speed: iconking.net/editor — swap colors, adjust timing, all in-browser.

Step 2: Install lottie-web

npm install lottie-web

Or CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

Step 3: Basic Implementation

import lottie from 'lottie-web';

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

Step 4: React Component

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

function LottieAnimation({ src, loop = true, size = 200 }) {
  const ref = useRef(null);
  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: ref.current, renderer: 'svg', loop, autoplay: true, path: src
    });
    return () => anim.destroy();
  }, [src]);
  return <div ref={ref} style={{ width: size, height: size }} />;
}

Step 5: Playback Controls

animation.play();
animation.pause();
animation.setSpeed(1.5);
animation.goToAndStop(30, true);       // frame 30
animation.playSegments([0, 60], true); // frames 0-60 only
animation.addEventListener('complete', () => console.log('done'));

Convert Lottie to Other Formats

All free, browser-based, no signup — iconking.net:

Lottie to GIF — for email, Slack, Notion
Lottie to MP4 — for social media video
Lottie to WebM — transparent web video
Lottie to SVG — static SVG frame export
Lottie to WebP — animated WebP
Lottie to APNG — animated PNG with transparency

Performance Tips

Renderer: Use SVG for quality. Switch to canvas when rendering 5+ animations at once.

Lazy-load off-screen animations:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadAnimation(entry.target);
      observer.unobserve(entry.target);
    }
  });
});
observer.observe(container);

DEV Community