Creating interactive scenarios

How to start creating state machines and using them

Let's go through the steps of creating some common use cases starting off with a toggle button.

Creating a toggle button

Step 1 - Creating the dotLottie and adding an animation

// Let's create a toggle button

const toggle = new DotLottie();

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

dotLottie supports multiple animations, multiple themes and multiple state machines! Add multiple animations and switch between them using the state machines.

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: 'startIdle',
        },
        states: {
          // We marked this state as the initial one
          startIdle: {
          // We want to the animation to wait on the first frame and listen for clicks
            playbackSettings: {
              autoplay: false,
              loop: false,
            },
            onClick: {
              state: 'playSun',
            },
          },
          // On click this state is activated
          playSun: {
            // We play once (loop = false) frames 0 to 30
            playbackSettings: {
              autoplay: true,
              loop: false,
              segments: [0, 30],
            },
            // Once the segment has finished playing, we transition
            onComplete: {
              state: 'endIdle',
            },
          },
          // We wait for another click
          endIdle: {
            playbackSettings: {
              autoplay: false,
              loop: false,
            },
            onClick: {
              state: 'playReverse',
            },
          },
          playReverse: {
            // We play the animation from frame 30 to 0, making it play in reverse
            playbackSettings: {
              autoplay: true,
              loop: false,
              segments: [30, 0],
            },
            // Once we're at frame 0 again, go to the inital state to start over
            onComplete: {
              state: 'startIdle',
            },
          },
        },
    })

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 the 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: 'firstShow'
      },
      states: {
            firstShow: {
                  animationID: 'firstAnimation',
                  playbackSettings: {
                        autoplay: true,
                  },
                  onComplete: {
                        state: 'secondShow'  
                  }
            },
            secondShow: {
                  animationID: 'secondAnimation',
                  playbackSettings: {
                        autoplay: true,
                  },
                  onComplete: {
                        state: 'thirdShow'  
                  }
            },
            thirdShow: {
                  animationID: 'thirdAnimation',
                  playbackSettings: {
                        autoplay: true,
                  },
                  onComplete: {
                        state: 'firstShow'  
                  }
            }
      }
})

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));
      });