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" id="dotlottie-player" 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:

<dotlottie-player autoplay loop src="/interactive_animation.lottie" id="player"></dotlottie-player>

const player = document.getElementById("player");

// Start the state machine
player.enterInteractiveMode('STATE_ID');

// Change the active state machine
player.enterInteractiveMode('ANOTHER_STATE_ID');

// Stop the state machine
player.exitInteractiveMode();