lottie-solid

LottiePlayer Solid Component

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

Demo

Usage

Installation

1. Install package using npm or yarn.

npm install lottie-solid

2. 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.

Methods

pause() => void

Pause animation play.

Returns

Type: void

play() => void

Start playing animation.

Returns

Type: void

setPlayerDirection(direction: 1 | -1 ) => void

Animation play direction.

Parameters

Name	Type	Description
value	number	Direction values.

Returns

Type: void

setPlayerSpeed(speed?: number) => void

Sets animation play speed.

Parameters

Name	Type	Description
value	number	Playback speed.

Returns

Type: void

stop() => void

Stops animation play.

Returns

Type: void

setSeeker(frame: number, play: boolean) => void

Seek to a given frame.

Returns

Type: void

License

MIT License © Neulen.dev