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

Enter fullscreen mode

Exit fullscreen mode

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 ?.…