How to Add a Lottie Animation to HTML (No Framework)

Option 1: the dotLottie web component

<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.11.1/+esm"></script>

<dotlottie-wc
  src="/animations/hero.lottie"
  autoplay
  loop
  style="width: 300px; height: 300px">
</dotlottie-wc>

This plays both .lottie and .json files. Pin an exact version in the script URL so an update cannot break your page.

Option 2: lottie-web

<div id="hero" style="width:300px;height:300px"></div>
<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie_light.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('hero'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/animations/hero.json'
  });
</script>

In Webflow, WordPress and site builders

Webflow has a native Lottie element. On WordPress, use a Lottie block plugin or paste the web component into a custom HTML block. Either way, upload the file to your media library or a CDN.

Good practice

Set a width and height, lazy-load animations below the fold, and pause or skip looping decoration when the user has prefers-reduced-motion set. If the file is served from another domain, that domain must allow cross-origin requests.

Frequently asked questions

Can I use Lottie without JavaScript?

No. A player script is needed to draw the animation. Export a GIF or video if you cannot run scripts.

Why does my Lottie not load locally?

Opening the HTML file directly blocks loading JSON. Serve the folder with a local server.

Is lottie-player still maintained?

LottieFiles now points developers to its dotLottie players. Check the package page before starting a new project with the older lottie-player.

How do I make a Lottie play on hover?

Set autoplay off and call play() on mouseenter and pause() or stop() on mouseleave.

A little space for good ideas.

How do I add a Lottie animation to an HTML website?

Core Takeaway