Lottie Animations with Vanilla JavaScript — No Framework Needed

#webdev #animation #html #javascript

You don't need React or any framework to use Lottie. With plain JavaScript and a CDN script, you can add beautiful animations to any HTML page in minutes.

Step 1: Get a Free Lottie Animation

Go to IconKing — a free browser-based tool where you can preview, customize colors, and download Lottie animations as .json files. No account needed. Save the file as animation.json.

Step 2: Add the Script

Include lottie-web via CDN in your HTML:

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

Step 3: Basic Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lottie Demo</title>
</head>
<body>
  <div id="animation" style="width:200px;height:200px;"></div>

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

That's all — no build step, no npm, no bundler.

Play, Pause, and Speed Controls

<div id="animation" style="width:200px;height:200px;"></div>
<button onclick="anim.play()">Play</button>
<button onclick="anim.pause()">Pause</button>
<button onclick="anim.stop()">Stop</button>
<button onclick="anim.setSpeed(2)">2x Speed</button>

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

Play Animation on Hover

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

container.addEventListener("mouseenter", () => anim.play());
container.addEventListener("mouseleave", () => anim.stop());

Play on Scroll (IntersectionObserver)

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

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    anim.play();
    observer.disconnect();
  }
}, { threshold: 0.3 });

observer.observe(document.getElementById("animation"));

npm Alternative (With a Bundler)

If you're using Webpack, Vite, or Parcel:

npm install lottie-web

import lottie from "lottie-web";
const anim = lottie.loadAnimation({ ... });

Where to Get Free Animations

IconKing — free Lottie preview, editor, and downloader. Supports .json and .lottie formats. Edit colors directly in the browser before downloading. Zero signup required.

LottieFiles — large community library of free and premium animations.

Both are free. IconKing is faster for quick downloads since there's no login wall.

DEV Community