Getting Started with the Svelte Player

In this tutorial, you will install and configure the Svelte player to display your first Lottie animation in a Svelte or SvelteKit application.

Prerequisites

• Working Svelte/SvelteKit development environment.

• Node.js and npm or yarn installed.

Installation

Install the package using your preferred package manager:

# Using npm
npm install @lottiefiles/dotlottie-svelte

# Using yarn
yarn add @lottiefiles/dotlottie-svelte

Basic Usage Example

Here's a simple Svelte component demonstrating how to import and use the player:

<script>
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
</script>

<main>
  <h1>Svelte Animation</h1>

  <DotLottieSvelte
    src="https://lottie.host/your-animation-id.lottie" // Replace with your animation URL
    autoplay
    loop
    style="width: 300px; height: 300px; border: 1px solid #eee;"
  />
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
  }
  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 100;
  }
</style>

Explanation:

1. Import: Import the DotLottieSvelte component in the <script> tag.

2. Use Component: Render the <DotLottieSvelte /> component in your template.

3. Props:

   • src: Required URL or path to your .lottie or .json file.

   • autoplay: Boolean prop (shorthand for autoplay={true}) to start playing immediately.

   • loop: Boolean prop (shorthand for loop={true}) to repeat the animation.

   • style: Standard HTML style attribute for basic sizing and styling.

Automatic Cleanup

The DotLottieSvelte component automatically handles the cleanup (calling destroy() on the core player instance) when the Svelte component is destroyed, preventing memory leaks.

Next Steps

• Explore Props: See all available configuration options in the Props Reference.

• See Examples: View more practical implementation patterns in the Examples.

• Advanced Control: Learn how to control playback programmatically and handle events in Advanced Usage.