Adding Animated Images (Lottie)

Bring a page to life with a lightweight, scalable animation — no video file to host, no extra coding required.

What's a Lottie animation?

A Lottie animation is a small .json file exported from a design tool like Adobe After Effects. Unlike a GIF or video, it's vector-based — so it scales to any size with no blur or pixelation, and the file itself is usually just a few hundred KB. You don't need to be a designer to use one: sites like LottieFiles and Envato Elements offer thousands of ready-made (and frequently free) animations you can download and drop straight into your site — illustrations, icons, loading spinners, and more.

🎞️ 🎞️ live-streaming-content-creator-animation.json

Adding an animation to a page

Place your cursor where you want the animation to appear.
Click the 🧩 Blocks button and select Lottie Animation.
Click the block's 🎞️ toolbar button, then upload (or pick, if you've already uploaded one) your .json file — the same Assets dialog you use for images.

That's it — the block is now wired to your animation file.

Turning it on in your template

Like site search, the animation player is already scaffolded into your site's scripts/ folder — it just needs two lines added to your template's <head> once:

<script src="/scripts/lottie.min.js"></script>
<script src="/scripts/lottie-init.js"></script>

If you're using one of the official Bootstrap or Tailwind starter templates, check whether these are already there before adding them again.

Why the editor only shows a placeholder

While you're editing — in both Visual view and the live Preview pane — the Lottie block shows a plain icon and label instead of the moving animation. This is expected, not a bug. WebHaste's preview can't safely run the extra script that plays the animation, for the same reason it can't run any custom JavaScript you add to your own site while you're still editing. The animation plays normally once you publish your site, or use Render to Local Folder/Packaged and open the result in a regular browser tab — that's the way to actually see it in motion before you publish.

Works offline too