SvelteKit Lottie Web Player

SvelteKit Lottie Web Player is a lightweight and easy-to-use library for integrating Lottie animations into your SvelteKit applications. This library is SSR (Server-Side Rendering) safe, providing seamless integration with SvelteKit's SSR capabilities. With SvelteKit Lottie Web Player, you can effortlessly add engaging and dynamic animations to your SvelteKit projects.

Features

• SSR (Server-Side Rendering) safe
• Easy integration with SvelteKit projects
• Lightweight and efficient
• Support for Lottie animations in JSON format
• Customizable animation playback options

Installation

To install SvelteKit Lottie Web Player, use your preferred package manager:

1npm install lottie-player-svelte
2# or
3yarn add lottie-player-svelte
4# or
5pnpm install lottie-player-svelte

Usage

1. Import the LottieSvelte component into your SvelteKit component:

1<script>
2import { LottieSvelte } from 'lottie-svelte';
3</script>

2. Use the LottieSvelte component in your SvelteKit template, providing the path to your Lottie animation file:

1<!-- external -->
2<LottiePlayer src="/path/to/your/animation.json" />
3
4<!-- imported src -->
5<script>
6import MyLottieJSON from "$lib/assets/my-lottie.json"
7</script>
8<LottieSvelte
9  src={MyLottieJSON}
10  autoplay={true}
11  loop={true}
12  speed={1.5}
13/>

3. Customize the animation playback options using component props:

1<LottieSvelte
2  src="/path/to/your/animation.json"
3  autoplay={true}
4  loop={true}
5  speed={1.5}
6/>

4. Controls the animation by binding this

1<script lang="ts">
2import { LottieSvelte, type LottieSvelteInstance } from 'lottie-svelte';
3
4let lottieSvelte: LottieSvelteInstance;
5
6onMount(() => {
7    setTimeout(() => {
8        lottieSvelte?.pause()
9    }, 500)
10})
11</script>
12
13<LottieSvelte
14    ...
15    bind:this={lottieSvelte}
16/>

Props

• src (String | Object, required): The path to the Lottie animation JSON file.
• autoplay (Boolean, optional, default: true): Whether the animation should start playing automatically.
• background (String, optional, default: "transparent"): Background color of the player container.
• controls (Boolean, optional, default: false): Whether to display playback controls.
• count (Number | undefined, optional, default: undefined): Number of times to play the animation (overrides loop).
• description (String, optional, default: "Lottie animation"): Description of the animation for accessibility.
• direction (1 | -1, optional, default: 1): Direction of the animation playback (1 for forward, -1 for backward).
• disableCheck (Boolean, optional, default: false): Whether to disable the animation size check.
• disableShadowDOM (Boolean, optional, default: false): Whether to disable the Shadow DOM.
• hover (Boolean, optional, default: false): Whether to pause the animation on hover.
• intermission (Number, optional, default: 1): Delay in milliseconds before the animation starts.
• loop (Boolean, optional, default: false): Whether the animation should loop.
• mode (PlayMode, optional, default: PlayMode.Normal): Playback mode of the animation.
• preserveAspectRatio (String, optional, default: "xMidYMid meet"): Aspect ratio preservation for the animation.
• renderer ("svg", optional, default: "svg"): Renderer type for the animation.
• viewBoxSize (String | undefined, optional, default: undefined): Size of the viewBox for the animation.
• speed (Number, optional, default: 1): The playback speed of the animation.
• webworkers (Boolean, optional, default: false): Whether to use web workers for rendering.
• containerClass (String, optional, default: ""): Custom CSS class for the player container.
• animationClass (String, optional, default: ""): Custom CSS class for the animation element.

Methods

• getLottie: () => any;
• play: () => void;
• pause: () => void;
• stop: () => void;
• seek: (value: number | string) => void;
• snapshot: (download: boolean) => string | void;
• setSpeed: (value: number) => void;
• setDirection: (value: AnimationDirection) => void;
• setLooping: (value: boolean) => void;
• togglePlay: () => void;
• toggleLooping: () => void;
• resize: () => void;

Emitted Events

1export enum PlayerEvents {
2	Complete = "complete",
3	Destroyed = "destroyed",
4	Error = "error",
5	Frame = "frame",
6	Freeze = "freeze",
7	Load = "load",
8	Loop = "loop",
9	Pause = "pause",
10	Play = "play",
11	Ready = "ready",
12	Rendered = "rendered",
13	Stop = "stop",
14}

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.