Add Lottie to a plain HTML website

Start with the working example

Our original example assets are free to use and modify. Player code retains its included license.

Try the HTML example

1. Download and serve the example

Extract the HTML example ZIP. From that folder, run python -m http.server 8080 and open http://localhost:8080. Use a local web server instead of opening the HTML through a file URL, because the browser fetches the JSON animation.

2. Keep the files together

index.html references lottie-light.min.js and animation.json beside it. Upload all three files to the same website directory. The ZIP includes the player license and an editable .motion source for our animation. If you move the asset to another folder, update its path in index.html.

3. Size the container

The example reserves a 240 by 240 area, which prevents the rest of the page moving when the animation loads. Adjust those dimensions to your design. SVG rendering scales the artwork inside that container; it does not resize your original editable project.

4. Control playback

The page creates one player with autoplay disabled, then starts it after loading unless reduced motion is requested. Play and Pause buttons control that instance. If your application replaces this part of the DOM, call destroy on the old player before creating another. Use loop false for one-shot confirmation animations.

5. Troubleshoot a blank result

Confirm the JSON URL returns the animation rather than an HTML error page. Check the browser console for missing scripts or images. Supply external assets or embed them in the source export. Use the checker for structural warnings, then verify in the browser where the page will be used.

Customize the source animation

Reference documentation

• lottie-web loading options

Continue with your animation

Try the moving button arrow in your component, or browse all six downloadable Lottie examples. Replace the sample JSON with your chosen file and keep its editable source for later changes.