DEV Community

Fazal Shah
Fazal Shah

Posted on

How to Use Lottie Animations in Svelte and SvelteKit

#svelte #javascript #animation #webdev

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?.destroy());
</script>

<div bind:this={container} style="width:{width};height:{height}"></div>
Enter fullscreen mode Exit fullscreen mode

Use it anywhere in your app:

<script>
  import LottiePlayer from "$lib/LottiePlayer.svelte";
</script>

<LottiePlayer src="/animations/success.json" loop={false} />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)