Creating interactive scenarios

How to create different types of interactive scenarios.

Loop until on-click

async function createExplodingPigeon() {
  const dotLottie = new DotLottie();

  await dotLottie
    .setAuthor('Sam')
    .setVersion('1.0')
    .addAnimation({
      id: 'pigeon',
      url: 'https://lottie.host/071a2de9-52ca-4ce4-ba2f-a5befd220bdd/ECzVp4eaMa.json',
    })
    .addStateMachine({
      descriptor: {
        id: 'pigeon_fsm',
        initial: 0, // The index of the state to start at
      },
      states: [
        {
          name: "pigeon",
          type: "PlaybackState",
          mode: "Forward",
          speed: 1,
          use_frame_interpolation: true,
          autoplay: true,
          loop: true,
          marker: "bird"
        },
        {
          name: "explosion",
          type: "PlaybackState",
          mode: "Forward",
          autoplay: true,
          speed: 0.5,
          loop: false,
          marker: 'explosion',
        },
        {
          name: "feathers",
          type: "PlaybackState",
          autoplay: true,
          speed: 1,
          loop: false,
          marker: 'feathers',
        }
      ],
      transitions: [
        {
          type: "Transition",
          from_state: 0,
          to_state: 1,
          on_pointer_down_event: {},
        },
        {
          type: "Transition",
          from_state: 1,
          to_state: 2,
          on_complete_event: {},
        },
        {
          type: "Transition",
          from_state: 2,
          to_state: 0,
          on_complete_event: {},
        },
      ],
      listeners: [
        {
          type: "PointerDown"
        }
      ],
      context_variables: [
      ]
    })
    .build()
    .then((value) => {
      return value.toArrayBuffer();
    })
    .then((value) => {
      fs.writeFileSync('exploding_pigeon.lottie', 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: 0,
}

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

States

Next we define our various states inside the states object

states: [
    {
      name: "pigeon",
      animationId: "pigeon"
      type: "PlaybackState",
      mode: "Forward",
      speed: 1,
      use_frame_interpolation: true,
      autoplay: true,
      loop: true,
      marker: "bird"
    },
    ...
]

We define a 'pigeon' 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. You can find the detailed list of playback settings here.

Lastly we define our transitions:

transitions: [
        {
          type: "Transition",
          from_state: 0,
          to_state: 1,
          on_pointer_down_event: {},
        },
        ...
]

Transitions are events that need to happen for the state machine to enter another state. Here we use on_pointer_down_event and define that we want to go from the state at index 0 to the state at index 1.

The full list of available transitions is visible here.

Creating a toggle button

Step 1 - Creating the dotLottie and adding an animation

const toggle = new DotLottie();

await toggle.addAnimation({
      id: 'toggle',
      url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json',
})

Step 2 - Adding our state machine

  const toggle = new DotLottie();

  await toggle
    .addAnimation({
      id: 'toggle',
      url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json',
    })
    .addStateMachine({
      // Define the id of the state machine and the initial state
      descriptor: {
        id: 'state_toggle',
        initial: 0,
      },
      states: [
        {
          name: 'wait',
          type: 'PlaybackState',
          autoplay: false,
          loop: false,
          segment: [0, 1],
        },
        {
          name: 'play_forward',
          type: 'PlaybackState',
          autoplay: true,
          loop: false,
          segment: [0, 30],
        },
        {
          name: 'play_reverse',
          type: 'PlaybackState',
          autoplay: true,
          loop: false,
          mode: "Reverse",
          segment: [30, 0],
        },
      ],
      transitions: [
        {
          type: "Transition",
          from_state: 0,
          to_state: 1,
          on_pointer_down_event: {},
        },
        {
          type: "Transition",
          from_state: 1,
          to_state: 2,
          on_pointer_down_event: {},
        },
        {
          type: "Transition",
          from_state: 2,
          to_state: 1,
          on_pointer_down_event: {},
        },
      ],
      listeners: [
        {
          type: 'PointerDown',
        },
      ],
      context_variables: [],
    })
    .build()
    .then((value) => {
      return value.toArrayBuffer();
    })
    .then((value) => {
      fs.writeFileSync('toggle.lottie', Buffer.from(value));
    });

Step 3 - Building the dotLottie

const toggle = new DotLottie();

await toggle.addAnimation({
        id: 'toggle',
        url: 'https://assets8.lottiefiles.com/private_files/lf30_tnblylie.json',
      })
      .addStateMachine({
        ...
      })
    .build()
    .then((value) => {
      return value.toArrayBuffer();
    })
    .then(async (value) => {
      const filename = 'toggle.lottie';

      console.log('> Writing to file: ', filename);
      fs.writeFileSync(filename, Buffer.from(value));
    });

Creating a looping showcase of animations

In this example we add multiple animations to our .lottie and loop through them continously.

Step 1 - Create the dotLottie

const showcase = new DotLottie();

await showcase.addAnimation({
      id: 'firstAnimation',
      url: 'https://lottie.host/7047918e-2ba5-4bf1-a552-3349f19ef789/Q1yB2lgufS.json',
}).addAnimation({
      id: 'secondAnimation',
      url: 'https://lottie.host/b658c6c9-77dc-4ecf-8519-43a3dc02a36e/tK4tGqJh2u.json'
}).addAnimation({
      id: 'thirdAnimation',
      url: 'https://lottie.host/e8c3091c-4f51-49b8-91e3-1086ca3b8d00/JWm1lQEuZW.json'
})

Step 2 - Add the state machine

const showcase = new DotLottie();

await showcase.addAnimation({
      id: 'firstAnimation',
      url: 'https://lottie.host/7047918e-2ba5-4bf1-a552-3349f19ef789/Q1yB2lgufS.json',
}).addAnimation({
      id: 'secondAnimation',
      url: 'https://lottie.host/b658c6c9-77dc-4ecf-8519-43a3dc02a36e/tK4tGqJh2u.json'
}).addAnimation({
      id: 'thirdAnimation',
      url: 'https://lottie.host/e8c3091c-4f51-49b8-91e3-1086ca3b8d00/JWm1lQEuZW.json'
}).addStateMachine({
      descriptor: {
            id: 'showcaseMachine',
            initial: 0
      },
      states: [
            {
                  name: "first_animation",
                  type: "Playback",
                  autoplay: true,
                  loop: false,
            },
            {
                  name: "second_animation",
                  type: "Playback",
                  autoplay: true,
                  loop: false,
            },
            {
                  name: "third_animation",
                  type: "Playback",
                  autoplay: true,
                  loop: false,
            },
      ],
      transitions: [
            {
                  from_state: 0,
                  to_state: 1,
                  on_complete: {},
            },
            {
                  from_state: 1,
                  to_state: 2,
                  on_complete: {},
            },
            {
                  from_state:2,
                  to_state: 0,
                  on_complete: {},
            },
      ],
      listeners: [],
      context_varibles: []
})

Step 3 - Building the dotLottie

Building the dotLottie varies from platform to platform but this is how you would build with node:

const showcase = new DotLottie();

await showcase.addAnimation({
            id: 'firstAnimation',
            url: 'https://lottie.host/7047918e-2ba5-4bf1-a552-3349f19ef789/Q1yB2lgufS.json',
      })
      .addAnimation({
            id: 'secondAnimation',
            url: 'https://lottie.host/b658c6c9-77dc-4ecf-8519-43a3dc02a36e/tK4tGqJh2u.json'
      }).addAnimation({
            id: 'thirdAnimation',
            url: 'https://lottie.host/e8c3091c-4f51-49b8-91e3-1086ca3b8d00/JWm1lQEuZW.json'
      }).addStateMachine({
            ...
      })
      .build()
      .then((value) => {
            return value.toArrayBuffer();
      })
      .then(async (value) => {
            const filename = 'showcase.lottie';

            console.log('> Writing to file: ', filename);
            fs.writeFileSync(filename, Buffer.from(value));
      });