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 ```svelte

   <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
   ```ts
   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.