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:

npm install lottie-player-svelte
# or
yarn add lottie-player-svelte
# or
pnpm install lottie-player-svelte

Usage

1. Import the LottieSvelte component into your SvelteKit component:

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

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

<!-- external -->
<LottiePlayer src="/path/to/your/animation.json" />

<!-- imported src -->
<script>
import MyLottieJSON from "$lib/assets/my-lottie.json"
</script>
<LottieSvelte
  src={MyLottieJSON}
  autoplay={true}
  loop={true}
  speed={1.5}
/>

3. Customize the animation playback options using component props:

<LottieSvelte
  src="/path/to/your/animation.json"
  autoplay={true}
  loop={true}
  speed={1.5}
/>

4. Controls the animation by binding this

<script lang="ts">
import { LottieSvelte, type LottieSvelteInstance } from 'lottie-svelte';

let lottieSvelte: LottieSvelteInstance;

onMount(() => {
    setTimeout(() => {
        lottieSvelte?.pause()
    }, 500)
})
</script>

<LottieSvelte
    ...
    bind:this={lottieSvelte}
/>

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

export enum PlayerEvents {
	Complete = "complete",
	Destroyed = "destroyed",
	Error = "error",
	Frame = "frame",
	Freeze = "freeze",
	Load = "load",
	Loop = "loop",
	Pause = "pause",
	Play = "play",
	Ready = "ready",
	Rendered = "rendered",
	Stop = "stop",
}

Contributing

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

License

This project is licensed under the MIT License.