Interactivity powered by state machines

State machines enable interactive animations that respond to user input and state changes.

Creation

Learn how to create dotLotties with state machines here.

Lifecycle Management

`stateMachineLoad(stateMachineId: string): boolean`

Loads a state machine by ID.

const success = dotLottie.stateMachineLoad('interactive-sm');

`stateMachineStart(): boolean`

Starts the state machine.

const success = dotLottie.stateMachineStart();

`stateMachineStop(): boolean`

Stops the state machine.

const success = dotLottie.stateMachineStop();

State Information

`stateMachineGetStatus(): string`

Returns the current state machine status.

const status = dotLottie.stateMachineGetStatus();

`stateMachineGetCurrentState(): string`

Returns the current state name.

const currentState = dotLottie.stateMachineGetCurrentState();

Input Management

`stateMachineSetBooleanInput(name: string, value: boolean): boolean`

Sets a boolean input value.

dotLottie.stateMachineSetBooleanInput('isHovered', true);

`stateMachineSetNumericInput(name: string, value: number): boolean`

Sets a numeric input value.

dotLottie.stateMachineSetNumericInput('progress', 0.75);

`stateMachineSetStringInput(name: string, value: string): boolean`

Sets a string input value.

dotLottie.stateMachineSetStringInput('currentSection', 'intro');

Event Handling

`stateMachinePostClickEvent(x: number, y: number): void`

Posts a click event at the specified coordinates.

dotLottie.stateMachinePostClickEvent(100, 200);

Complete Example

// Initialize with state machine
const dotLottie = new DotLottie({
  canvas: document.querySelector('#canvas'),
  src: 'interactive-animation.lottie',
  stateMachineId: 'main-sm',
  stateMachineConfig: {
    openUrlPolicy: {
      requireUserInteraction: true,
      whitelist: ['https://trusted-domain.com']
    }
  }
});

// Listen for state machine events
dotLottie.addEventListener('stateMachineStart', () => {
  console.log('State machine started');
});

dotLottie.addEventListener('stateMachineTransition', ({ fromState, toState }) => {
  console.log(`Transitioning from ${fromState} to ${toState}`);
});

// Set initial inputs
dotLottie.addEventListener('ready', () => {
  dotLottie.stateMachineSetBooleanInput('isLoggedIn', false);
  dotLottie.stateMachineSetNumericInput('userScore', 0);
  dotLottie.stateMachineSetStringInput('userName', 'Guest');
});

// Handle user interactions
document.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  dotLottie.stateMachinePostClickEvent(x, y);
});

Available Methods

Method	Returns	Description
`stateMachineLoad(stateMachineId: string)`	boolean	Loads a state machine by ID.
`stateMachineStart()`	boolean	Starts the state machine.
`stateMachineStop()`	boolean	Stops the state machine.
`stateMachineGetStatus()`	string	Returns the current state machine status.
`stateMachineGetCurrentState()`	string	Returns the current state name.
`stateMachineSetBooleanInput(name: string, value: boolean)`	boolean	Set boolean input for state machine.
`stateMachineSetNumericInput(name: string, value: number)`	boolean	Set numeric input for state machine.
`stateMachineSetStringInput(name: string, value: string)`	boolean	Set string input for state machine.
`stateMachinePostClickEvent(x: number, y: number)`	void	Posts a click event at coordinates.