Svelte's onMount lifecycle hook is perfect for integrating Lottie — it guarantees DOM availability before the animation loads. Here's how to set it up.
Get a Lottie File
Download a free animation from IconKing — no login needed, just preview and download .json or .lottie files. Place it in your static/animations/ folder (SvelteKit) or public/animations/ folder.
Install lottie-web
npm install lottie-web
Basic Svelte Component
Create src/lib/LottiePlayer.svelte:
<script>
import { onMount, onDestroy } from "svelte";
import lottie from "lottie-web";
export let src = "/animations/default.json";
export let loop = true;
export let autoplay = true;
export let width = "200px";
export let height = "200px";
let container;
let animation;
onMount(() => {
animation = lottie.loadAnimation({
container,
renderer: "svg",
loop,
autoplay,
path: src,
});
});
onDestroy(() => animation?.destroy());
</script>
<div bind:this={container} style="width:{width};height:{height}"></div>
Use it anywhere in your app:
<script>
import LottiePlayer from "$lib/LottiePlayer.svelte";
</script>
<LottiePlayer src="/animations/success.json" loop={false} />
Adding Controls
Export the animation instance so parent components can control playback:
<script>
import { onMount, onDestroy } from "svelte";
import lottie from "lottie-web";
export let src;
let container;
export let animation = null;
onMount(() => {
animation = lottie.loadAnimation({
container,
renderer: "svg",
loop: true,
autoplay: false,
path: src,
});
});
onDestroy(() => animation?.destroy());
</script>
<div bind:this={container} style="width:200px;height:200px"></div>
Parent component:
<script>
import LottiePlayer from "$lib/LottiePlayer.svelte";
let animation;
</script>
<LottiePlayer src="/animations/loading.json" bind:animation />
<button on:click={() => animation?.play()}>Play</button>
<button on:click={() => animation?.pause()}>Pause</button>
SvelteKit SSR Note
onMount only runs in the browser, so lottie-web never runs on the server. This means no window is not defined errors — no extra configuration needed.
Where to Find Free Lottie Animations
IconKing is a free tool for previewing, editing, and downloading Lottie animations. You can tweak colors directly in the browser before downloading — handy for matching your Svelte app's design system. No account required.
