Home

Welcome to the solid-lottie wiki!

Usage

import Lottie, { LottieRef } from 'solid-lottie';

const App: VoidComponent = () => {
  let lottieRef: LottieRef | undefined;

  const handleDataReady = () => {
    if (!lottieRef) return;

    lottieRef.play();
  };

  return (
    <>
      <Lottie path="/animation.json" loop ref={(v) => (ref = v)} onDataReady={() => handleDataReady()} />
    </>
  );
};

<Lottie/> props

All of the props are optional but you must provide path or animationData or the component will throw an exception!

animationData

A JSON object with exported animation data (you must provide path or animationData)

path

A path to a json file with exported animation data (you must provide path or animationData)

ref

Takes in a function which as an arguments takes an object containing all of the interaction methods

(The way this is done is weird, or at least I think, there might be another way to get the interaction methods to the parent?)

autoplay

If set to true animation will start playing automatically

loop

If set to true animation will loop infinitely

name

Name of the animation

initialSegment

An array with two numerical items (frames). If set the frames will define the first and the last frame of animation playback

width

Defaults to 100%, it's the width of the container, if style objects contains width it will be used instead.

height

Defaults to 100%, it's the height of the container, if style objects contains height it will be used instead.

style

Object containing CSS properties for the container

onComplete

Event fired when the animation has completed playing

onLoopComplete

Event fired when the animation has completed playing a loop

onEnterFrame

Event fired when the animation playback has entered a frame

onSegmentStart

Event fired when the animation playback started playing a segment

onConfigReady

Event fired when the config is ready

onDataReady

Event fired when the animation data has been loaded and are ready to be used

onDataFailed

Event fired when an error has occurred while loading the animation data

onLoadedImages

Event fired when external images have been loaded (Not sure about this one)

onDOMLoaded

Event fire when the DOM of the animation has been loaded

onDestroy

Event fired when the animation has been destroyed

onError

Event fired when an error has occurred

Interaction methods

Methods used for interaction with the animation.

destroy

Destroy the animation

destroy

destroys the animation

stop

Stops the animation playback and goes to the first frame

play

Starts the animation playback from the current frame

pause

Stops the animation playback and stays on the last played frame

goToAndPlay

Takes in a value and and optional second argument. Goes to the set value and if the second argument is true then the value is considered a frame number, resumes the playback.

goToAndStop

Takes in a value and and optional second argument. Goes to the set value and if the second argument is true then the value is considered a frame number, stops the playback.

getDuration

Takes in a value and and optional second argument. Returns the duration of the animation and if the second argument is true then the value is considered a frame number

setSpeed

Sets the speed of the animation playback, defaults to 1

setDirection

Sets the direction of the animation playback, -1 is reverse, 1 is forward

playSegments

Takes in a segment or an array of segments, second optional argument if set to true forces to resume the playback from the set segment instead of waiting for the currently playing segment to finish.

setSubframe

If set to true it will ignore the exported AE framerate and update on every requestAnimationFrame