State machines for interactivity

dotLottie files can contain state machines to enable interactivity

.lottie animations can contain state machines describing powerful interactive scenarios. The dotLottie player can read these state machines and set them up for you.

1. Creating a .lottie with state machines

As there are lot of features to cover, in this guide we'll only talk about how to use them with the player, not create them. The full documentation on how to add state machines to your .lottie animations is available here.

There is also a .lottie playground available to create and test your state machines here.

2. Activate the state machine via props

Once you have your .lottie, if you want to have the state machine enabled as soon as it's loaded we can do so using the activeStateId prop:

<dotlottie-player src="/interactive_animation.lottie" activeStateId="run_state"></dotlottie-player>

3. Activate and change the active state machine via method calls

You can activate your state machine at any time using the enterInteractiveMode method of the player:

import { useRef } from "react";
import type { DotLottieRefProps } from "@dotlottie/react-player";
import { DotLottiePlayer, Controls, PlayerEvents } from "@dotlottie/react-player";
import "@dotlottie/react-player/dist/index.css";

const App = () => {
  const lottieRef = useRef<DotLottieRefProps>();
  
  useEffect(() => {
    // Change the active state machine
    lottieRef.current?.enterInteractiveMode('STATE_ID');
    
    // Call again to change to a different state machine
    lottieRef.current?.enterInteractiveMode('ANOTHER_STATE_ID');

    // Stop the state machine
    player.exitInteractiveMode();
  }, [lottieRef]);
  return (
    <div>
      <DotLottiePlayer
        lottieRef={lottieRef}
        style={{ height: "500px" }}
        src="https://lottie.host/ffebcde0-ed6d-451a-b86a-35f693f249d7/7BMTlaBW7h.lottie"
        autoplay
        loop
      >
        <Controls />
      </DotLottiePlayer>
    </div>
  );
};

export default App;