Interactivity

dotLottie files can contain multiple state machine definitions allowing you to easily add and playback lottie animations with complex interactions without writing code. You define your state machines with dotLottie-js, export your .lottie file and use the dotLottie players to load up your animation and state machine config, allowing you to have deeply interactive animations without having to write interactivity code yourself. A playground for creating and testing .lottie files is available here.

Quick start guide

const pigeon = new DotLottie();

await pigeon
  .addAnimation({
    id: 'pigeon',
    url: 'https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json',
  })
  .addStateMachine({
    descriptor: {
      id: 'exploding_pigeon',
      initial: 'running',
    },
    states: {
      running: {
        animationId: 'pigeon',
        playbackSettings: {
          autoplay: true,
          loop: true,
          direction: 1,
          segments: 'bird',
        },
        onClick: {
          state: 'exploding',
        },
      },
      exploding: {
        animationId: 'pigeon',
        playbackSettings: {
          autoplay: true,
          loop: 1,
          direction: 1,
          segments: 'explosion',
        },
        onComplete: {
          state: 'feathers',
        },
      },
      feathers: {
        animationId: 'pigeon',
        playbackSettings: {
          autoplay: true,
          loop: false,
          direction: 1,
          segments: 'feathers',
        },
        onComplete: {
          state: 'running',
        },
      },
    },
  })
  .build()
  .then((value) => {
    return value.toArrayBuffer();
  })
  .then(async (value) => {
    const filename = 'pigeon.lottie';

    console.log('> Writing to file: ', filename);

    fs.writeFileSync(filename, Buffer.from(value));
  });

In this example we add our animation and then our state machine definition. Let’s look at the different parts of our state machine.

Descriptor

descriptor: {
        id: 'exploding_pigeon',
        initial: 'running',
}

Firstly we define a descriptor. The descriptor contains the id of this state machine as well as an initial state.

States

Next we define our various states inside the states object

states: {
        running: {
          animationId: 'pigeon',
          playbackSettings: {
            autoplay: true,
            loop: true,
            direction: 1,
            segments: 'bird',
          },
          onClick: {
            state: 'exploding',
          },
        },
        ...
}

We define a 'running' state and include the optional 'animationId' that we set to 'pigeon', the same animation id we declared when calling 'addAnimation'.

Then we set the playback settings we want our animation to have when entering this state. These are the same playback settings available in the manifest and two others (segments and playOnScroll). You can find the detailed list of playback settings here.

Lastly we define our transitions. Transitions are events that need to happen for the state machine to enter another state. Here we use onClick and define which state we want to go to when that happens.

The full list of available transitions is visible here.

This is the result of the full state machine in action!

Interactivity

Quick start guide

Descriptor

Playback settings

Transitions

Creating interactive scenarios