How to Add a Lottie Animation to a Website (HTML, React, Vue, Webflow, WordPress)

A Lottie animation is a JSON file. To show it you need a player: lottie-web (the original from Airbnb), the <lottie-player> web component, or the newer dotLottie player. Below are copy-paste recipes for each environment. Grab a test file from the Lottie library.

1. Plain HTML, fastest to start

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="/animations/success.json" background="transparent" speed="1"
  style="width:240px;height:240px" loop autoplay></lottie-player>

2. lottie-web with full control

<div id="anim" style="width:240px;height:240px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light.min.js"></script>
<script>
const anim = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg', loop: true, autoplay: true,
  path: '/animations/success.json'
});
// control it
anim.setSpeed(1.5);
anim.playSegments([0, 40], true);
document.getElementById('anim').addEventListener('mouseenter', () => anim.goToAndPlay(0));
</script>

lottie_light supports only the SVG renderer and no expressions, but it is half the size. Use the full build if your file uses expressions.

3. dotLottie (smaller files, multiple animations)

<script type="module" src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"></script>
<dotlottie-player src="/animations/bundle.lottie" autoplay loop style="width:240px"></dotlottie-player>

4. React

npm i lottie-react
import Lottie from 'lottie-react';
import success from './success.json';
export const Success = () => <Lottie animationData={success} loop={false} style={{width:240}} />;

For scroll-driven or interactive states, useLottie exposes the lottie-web instance. The full Webflow, React and Framer walkthrough on the author's site covers hover, scroll and theming patterns.

5. Vue and Svelte

Use vue3-lottie or lottie-vuejs; in Svelte, call lottie.loadAnimation inside onMount. The API is identical to lottie-web.

6. Webflow

Webflow has a native Lottie element: drag it in, upload the JSON to Assets, and bind playback to scroll or hover in Interactions. No code required.

7. WordPress and Elementor

Elementor Pro includes a Lottie widget. Otherwise, upload the JSON via a plugin that allows the file type (or via FTP) and paste recipe 1 into an HTML block.

8. Framer, Figma and email

Framer has a Lottie component in Insert. Figma plays Lottie in prototypes via the LottieFiles plugin. Email clients cannot run JavaScript, so export a GIF or MP4 for newsletters, see format guide.

Performance checklist

• Load the player once, deferred, and only on pages that need it.
• Lazy-start animations with IntersectionObserver so off-screen files do not animate.
• Keep files under 100 KB; see optimisation guide.
• Respect prefers-reduced-motion: show the final frame instead of looping.
• Give the container fixed dimensions to avoid layout shift.