xpluscal/svelte-lottie-player

Lottie Player component for Svelte

Svelte Lottie Player

Lottie player component for use with Svelte.

This provides a Lottie player using the lottie-web library, adding a control toolbar, render graph and other handy configs for viewing Lottie animations.

Features

• Configuration of lottie-web via props
• Control toolbar with play, pause, stop, progress track with seeker, looping
• Render graph for viewing frame render times

Table of Contents

• Getting started
• Installation
• Usage

Demos

• Component Storybook
• Basic usage on Svelte REPL

Installation

With yarn:

yarn add @lottiefiles/svelte-lottie-player

With npm:

npm install --save @lottiefiles/svelte-lottie-player

Usage

Basic steps for use in a Svelte project:

<!-- App.svelte -->
<script>
  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';

  let controlsLayout = [
    'previousFrame',
    'playpause',
    'stop',
    'nextFrame',
    'progress',
    'frame',
    'loop',
    'spacer',
    'background',
    'snapshot',
    'zoom',
    'info',
  ];
</script>

<LottiePlayer
  src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
  autoplay="{true}"
  loop="{true}"
  controls="{true}"
  renderer="svg"
  background="transparent"
  height="{600}"
  width="{600}"
  controlsLayout="{controlsLayout}"
/>