Skip to content

MattDavis00/lottie-svelte

Repository files navigation

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}/>

Animated heart GIF (Forward)

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}
/>

Animated heart GIF (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