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

> The simplest way is the dotLottie web component: load @lottiefiles/dotlottie-wc from a CDN and add a <dotlottie-wc> tag with src, autoplay and loop attributes. If you prefer full control, load lottie-web and call lottie.loadAnimation() on a container div.

Updated November 2026. Source: https://www.exodeui.com/questions/how-to-add-lottie-animation-to-html/

## Key takeaways

- Web component: <dotlottie-wc src="..." autoplay loop>
- Script option: lottie-web with lottie.loadAnimation()
- Give the container a fixed size to avoid layout shift
- Host the JSON or .lottie file on your own domain or a CDN
- Respect prefers-reduced-motion for looping decoration

## 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.

## Related

- [How to use Lottie in React](https://www.exodeui.com/questions/how-to-use-lottie-in-react)
- [Why is lottie-web so big?](https://www.exodeui.com/questions/why-is-lottie-web-bundle-so-big)
- [How to loop or pause a Lottie](https://www.exodeui.com/questions/how-to-loop-or-pause-lottie-animation)
- [Best web animation tools](https://www.exodeui.com/best-web-animation-tools)