Lottie Svelte

lottie-svelte

A very simple Svetle wrapper around lottie-web, made with TypeScript.

Exposes the underlying lottie-web API if you need it.

Programmatically control animations.

Example #1:

<script>
    import { Lottie } from 'lottie-svelte';
</script>

<Lottie path="./love.json" speed={0.2}/>

https://stackblitz.com/edit/vitejs-vite-59zcbv?file=src/App.svelte

Example #2:

Common properties available via props.

<script>
    import { Lottie } from 'lottie-svelte';
    import { Direction } from 'lottie-svelte/iface';
</script>

<Lottie
    path="./love.json"
    autoplay={true}
    loop={false}
    speed={0.2}
    direction={Direction.REVERSE}
/>

https://stackblitz.com/edit/vitejs-vite-wtauwm?file=src/App.svelte

Lottie component props:

Prop	type	required	description
path	string	✅	The path to the lottie file, relative to the static directory. E.g. for a lottie file located at `static/lottie/heart.json`, you would pass in `./lottie/heart.json` to this prop.
loop	boolean	⏩	Whether the lottie should loop when it finishes. Default `true`.
autoplay	boolean	⏩	Whether the lottie should autoplay once it loads. Default `true`.
speed	number	⏩	Default 1. The speed that the animation should play. Float, 2 is 2x, 0.5 is half speed etc.
direction	Direction	⏩	Whether the animation plays FORWARD or in REVERSE. Default is FORWARD. Use the Direction enum in iface. FORWARD = 1, REVERSE = -1.
name	string	⏩	Sometimes required by the underlying `lottie-web` functions. You may need to set this if you are calling underlying certain methods on the AnimationItem
renderer	RendererType	⏩	How the lottie is rendered, one of `'svg'` `'canvas'` `'html'`. Default is `'svg'`
container	HTMLElement	⏩	Under normal circumstances don't use this prop. A reference to an element where the lottie will be created. If left blank lottie-svelte will create one for you.

Programmatically control animation:

In addition to setting initial speed, direction etc. We provide a convenient event that fires once the lottie animation has loaded on:animation. From this event you can get the underlying animation and control its speed, direction, frame and much more programatically. You can find the supported AnimationItem methods here

<script lang="ts">
    import { Lottie } from 'lottie-svelte';
    import type { AnimationEvent } from 'lottie-svelte/iface';

    function handler(event: AnimationEvent) {
        const animation = event.detail; // lottie-web AnimationItem
        animation.setSpeed(0.2);
        setTimeout(() => animation.pause(), 1500);
    }
</script>

<!-- Lottie file is located at static/heart.json -->
<Lottie path="./heart.json" on:animation={handler} />

https://stackblitz.com/edit/vitejs-vite-o6z51r?file=src/App.svelte

Top categories