Simple Drop-in Animations

• UI

Live demo

This is a Lottie animation added with a single HTML tag. No custom JavaScript or CSS animations required.

Embedded with the DotLottie web player. Local .lottie asset, looping and autoplay enabled.

Why use Lottie?

Lottie is a lightweight, vector‑based animation format (JSON or .lottie) that plays natively on the web and mobile. Designers export straight from After Effects/Figma; developers embed the file with a single tag. You get sharp animations at any size, small downloads, and simple controls—without hand‑coding animation logic.

What you need

Add an animation in two steps

  1. Upload the Lottie file to your site. Example path: /lottie/bouncing_square.lottie.
  2. Paste these two snippets into your page (anywhere inside <head> and where you want it to appear):

In the <head>:

<script type="module" src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"></script>

Where the animation should appear:

<dotlottie-player
  src="/lottie/bouncing_square.lottie"
  background="transparent"
  loop
  autoplay
  style="width: 480px; height: 480px">
</dotlottie-player>

That’s it. You can change the size by editing the width/height numbers.

Optional settings

  • Show controls (play/pause/seek): add controls
  • Reduce motion: remove autoplay so it only plays when clicked
  • Use JSON instead of .lottie: swap the script + tag to the LottieFiles player: 
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="/path/your.json" background="transparent" loop autoplay></lottie-player>

Tips

  • Prefer optimized assets (Optimized Lottie JSON or .lottie) to keep downloads small.
  • Size the animation by changing the inline width/height.
  • If you can’t include third‑party scripts, convert the Lottie to a video or GIF and use a normal <video> or <img>.
  • Designers keep control of the motion; developers avoid hand‑coding animations.