Driving with props

loop, speed and direction are reactive: change the prop and the running animation follows, with no reload.

import { Lottie } from "lottie-react";import { useState } from "react";export function SpeedAndDirection() {  const [speed, setSpeed] = useState(1);  const [reversed, setReversed] = useState(false);  return (    <>      <Lottie        src="/anim.json"        autoplay        loop        speed={speed}        direction={reversed ? "reverse" : "forward"}      />      <div>        <button          type="button"          onClick={() =>            setSpeed((current) => (current >= 4 ? 0.5 : current * 2))          }        >          speed {speed}x        </button>        <button          type="button"          onClick={() => setReversed((current) => !current)}        >          {reversed ? "reverse" : "forward"}        </button>      </div>    </>  );}

The playground

The three reactive props, live. The code rewrites as you change them, and a prop at its default leaves the code:

<Lottie  src="/anim.json"  autoplay  loop/>

Load-time props

Everything that describes the load itself (src, renderer, rendererSettings, autoplay, segment, assetsPath) reloads the animation when it changes. Hover a prop in your editor to see which kind it is.

When a prop and a command disagree

Props and commands write the same values, and per field, the last writer wins. Set speed={2}, call setSpeed(4), and the animation runs at 4 until the prop's value next changes; direction and loop are untouched. Driving one field from both places at once logs a development warning.

The other two channels

Props declare what the animation should be. Commands live on the handle, and the animation reports back through subscriptions.