Lottie for React
Edit page
Components
LottieGetting StartedPropsInteraction methodsInteractivityExamples
Hooks

Lottie

Getting Started

import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";


const Example = () => {
  return <Lottie animationData={groovyWalkAnimation} />;
};


export default Example;

Props

animationData

A JSON Object with the exported animation data

Type: Object
Default: none
Required: ☑

loop

Set it to true for infinite amount of loops, or pass a number to specify how many times should the last segment played be looped (More info)

Type: Boolean | Number
Default: true
Required: ☐

autoplay

If set to true, animation will play as soon as it's loaded

Type: Boolean
Default: true
Required: ☐

initialSegment

Expects an array of length 2. First value is the initial frame, second value is the final frame. If this is set, the animation will start at this position in time instead of the exported value from AE

Gotcha: The animation will re-run every time the segment array changes. Therefore, to ensure that the animation behaves as expected, you must provide a stable array.

Type: Array
Default: none
Required: ☐

onComplete

onLoopComplete

onEnterFrame

onSegmentStart

onConfigReady

onDataReady

onDataFailed

onLoadedImages

onDOMLoaded

onDestroy

style

Style object that applies to the animation wrapper (which is a div)

Type: Object
Default: none
Required: ☐

lottieRef

Expects a React ref object in which interaction methods will be stored

Type: React.RefObject
Default: none
Required: ☐

interactivity

Interactivity params to sync animation with either scroll or cursor.

Type: Object
Default: none
Required: ☐

React.HTMLProps<HTMLDivElement>

Alongside the props listed above, the <Lottie/> component also extends React.HTMLProps<HTMLDivElement>. This allows you to pass props to the container <div> element.

import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";


const Example = () =>
  <Lottie
    animationData={groovyWalkAnimation}
    aria-aria-labelledby="use lottie animation"
  />
};


export default Example;

Interaction methods

These methods are designed to give you more control over the Lottie animation, and fill in the gaps left by the props:

play()

stop()

pause()

setSpeed(speed)

speed: 1 is normal speed

goToAndPlay(value, isFrame)

value: numeric value.
isFrame: defines if first argument is a time based value or a frame based (default false).

goToAndStop(value, isFrame)

value: numeric value.
isFrame: defines if first argument is a time based value or a frame based (default false).

setDirection(direction)

direction: 1 is forward, -1 is reverse.

playSegments(segments, forceFlag)

segments: array. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
forceFlag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately.

setSubframe(useSubFrames)

useSubFrames: If false, it will respect the original AE fps. If true, it will update on every requestAnimationFrame with intermediate values. Default is true.

getDuration(inFrames)

inFrames: If true, returns duration in frames, if false, in seconds

destroy()

Calling the methods

To use the interaction methods listed above, pass a reference object to the Lottie component by using the ref prop (see the React documentation to learn more about Ref or useRef hook):

import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";


const Example = () => {
  const lottieRef = useRef();


  return <Lottie lottieRef={lottieRef} animationData={groovyWalkAnimation} />;
};


export default Example;

You can then use the interaction methods like this:

...
lottieRef.current.pause();
...

Interactivity

To sync animation with either scroll or cursor, you can pass the interactivity object.

For more information please navigate to useLottieInteractivity hook

import Lottie from "lottie-react";
import robotAnimation from "./robotAnimation.json";


const style = {
  height: 300,
};


const interactivity = {
  mode: "scroll",
  actions: [
    {
      visibility: [0, 0.2],
      type: "stop",
      frames: [0],
    },
    {
      visibility: [0.2, 0.45],
      type: "seek",
      frames: [0, 45],
    },
    {
      visibility: [0.45, 1.0],
      type: "loop",
      frames: [45, 60],
    },
  ],
};


const Example = () => {
  return (
    <Lottie
      animationData={robotAnimation}
      style={style}
      interactivity={interactivity}
    />
  );
};


export default Example;

Examples

Soon :)