Playback State

Different types of states are used to perform different actions.

Quick start:

addStateMachine({
      descriptor: {
        ...
      },
      states: [
        {
          name: "...",
          type: "PlaybackState",
          mode: "Forward",
          speed: 1,
          use_frame_interpolation: true,
          autoplay: true,
          loop: true,
          marker: "bird"
        },
      ...

State types available:

You define a states’ type by defining the ‘type’ property.

PlaybackState

type: “PlaybackState”

A playback state allows you to control how the animation will play when entering this state. The available configuration options are:

animationId?: string

Loads the animation with this id from the .lottie file.

loop?: boolean

Defaults to false if not defined.

autoplay?: boolean

Defaults to false if not defined.

mode?: string

The play mode to apply to the animation. Can either be:

• Forward
• Reverse
• Bounce (Play animation from start to end and then end to start)
• ReverseBounce (Play animation from end to start and then start to end)

speed?: number

Animation playback speed.

marker?: string

Use the marked segment contained inside the animation file.

segment?: [number, number]

Define a start and end frame to use.

use_frame_interpolation?: boolean

Activate frame interpolation. Defaults to true.

reset_context?: string

⚠️ Not implemented.

Resets the context value with the passed id to its default value. Using ”*” will reset all context variables to their default values.

entry_actions?: []

⚠️ Not implemented.

Entry actions allow you to perform a certain action when entering the state:

• Play sounds
• Open a URL
• Set a context variable’s value
• Use a theme file

exit_actions?: []

⚠️ Not implemented.

Exit actions allow you to perform a certain action when entering the state:

• Play sounds
• Open a URL
• Set a context variable’s value
• Use a theme file

SyncState

⚠️ Not implemented.

Allow syncing an animation’s frame to a context variable, allowing for interactions such as playing on scroll.

GlobalState

⚠️ Not implemented.