Lottie-solid NPM

LottiePlayer Solid Component

This is a Solid.js component for the Lottie Web Player.Based on the Lottie Player Web Component.

Demo

screencast

Usage

Installation

Install package using npm or yarn.

npm install lottie-solid

Import package in your code.

import { Player, Buttons, Theme } from 'lottie-solid';

Player component

Add the element Player and set the src prop to a URL pointing to a valid Lottie JSON.

<Player
  autoplay
  loop
  controls
  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
  style={{ height: '300px', width: '300px' }}
  buttons={[Buttons.Play, Buttons.Repeat, Buttons.Frame]}
  theme={Theme.Transparent}
/>

Props

Prop	Description	Type	Default
`lottieRef`	Get lottie animation object	`function`	`undefined`
`onEvent`	Listen for events	`function`	`undefined`
`onStateChange`	Play state changes	`function`	`undefined`
`onBackgroundChange`	Listen for bg changes	`function`	`undefined`
`autoplay`	Autoplay animation on load.	`boolean`	`false`
`background`	Background color.	`string`	`undefined`
`controls`	Show controls.	`boolean`	`false`
`direction`	Direction of animation.	`number`	`1`
`hover`	Whether to play on mouse hover.	`boolean`	`false`
`click`	Whether to play on mouse click.	`boolean`	`false`
`keepLastFrame`	Stop animation on the last frame.Has no effect if `loop` is true.	`boolean`	`false`
`loop`	Whether to loop animation.	`boolean`	`false`
`renderer`	Renderer to use.	`"svg" \\| "canvas"`	`'svg'`
`speed`	Animation speed.	`number`	`1`
`style`	The style for the container.	`object`	`undefined`
`buttons`	The buttons to show.	`Buttons[]`	`undefined`
`theme`	The theme to use.	`Theme`	`undefined`
`src` (required)	Bodymovin JSON data or URL to JSON.	`object`	`string`

Get Player instance

To call methods on the instance of the Player component. You may get a reference to the component and call the methods on ref.current. That's a solid way of doing a document.getElementById(); You may then use this ref i.e.: player in the example below to call methods that are described in this documentation.

import { createSignal, createEffect } from 'solid-js';
import { Player } from 'lottie-solid';

export default function App() {
  const [playerRef, setPlayerRef] = createSignal<HTMLDivElement>();

  return (
    <Player
      ref={setPlayerRef} // set the ref to your component
      loop
      src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
      style={{ height: '300px', width: '300px' }}
    />
  );
}

Get Lottie instance

The lottieRef prop returns the Lottie instance which you can use to set data and call methods as described in the bodymovin documentation.

import { createSignal, createEffect } from 'solid-js';
import { Player, AnimationItem } from 'lottie-solid';

export default function App() {
  const [lottieRef, setLottieRef] = createSignal<AnimationItem>();

  // example of calling a method on the lottie instance
  // this will pause the animation after 1 second
  createEffect(() => {
    const lottie = lottieRef();
    if (lottie) {
      setTimeout(() => lottie.pause(), 1000);
    }
  });
  
  return (
    <Player
      lottieRef={setLottieRef} // the lottie instance is returned in the argument of this prop. set it to your local state
      loop
      src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
      style={{ height: '300px', width: '300px' }}
    />
  );
}

Listening for events

import { createSignal, createEffect } from 'solid-js';
import { Player, AnimationItem } from 'lottie-solid';

export default function App() {
  const [lottieRef, setLottieRef] = createSignal<AnimationItem>();


  const doSomething = () => {
    lottieRef()?.play(); // make use of the lottie instance and call methods
  }
  
  return (
    <Player
      onEvent={(event) => {
        // check event type and do something
        if (event === 'load') {
          this.doSomething();
        }
      }}
      lottieRef={setLottieRef}
      loop
      src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
      style={{ height: '300px', width: '300px' }}
    />
  );
}

Events

The following events are exposed and can be listened to via addEventListener calls.

Name	Description
`load`	Animation data is loaded.
`error`	An animation source cannot be parsed, fails to load or has format errors.
`ready`	Animation data is loaded and player is ready.
`play`	Animation starts playing.
`pause`	Animation is paused.
`stop`	Animation is stopped.
`loop`	An animation loop is completed.
`complete`	Animation is complete (all loops completed).
`frame`	A new frame is entered.

lottie solid solidjs component

lottie-web

1.1.0

4 months ago

1.0.0

4 months ago