Multi-animation .lotties

dotLottie support multiple animations.

1. Creating a multi-animation .lottie file

To create a multi-animation .lottie file, you can use our creation library dotlottie-js.

After following the installation steps for dotlottie-js, you can start creating your own .lotties:

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

  // build dotLottie
  await dotLottie
        .addAnimation({
          id: 'dog_animation',
          url: 'https://my_dog_animation.json',
          loop: true,
          autoplay: true
        })
        .addAnimation({
          id: 'cat_animation',
          url: 'https://my_cat_animation.json',
          loop: true,
          autoplay: true,
          direction: -1,
          playMode: 'bounce'
        })
        .build()
  
  // download dotLottie
  await dotlottie.download('my_animation.lottie');
}

2. Using your .lottie

Following the previous usage steps as well as the play, next and previous methods we can play different animations contained inside your .lottie.

Use the player component to load your file:

<dotlottie-player
  src="my_animation.lottie"
  style="width: 320px"
>
</dotlottie-player>

As we haven't used any props, the settings from inside the manifest will be used. If you want to override the settings for the first animation, you can use props as you usually would.

Your animation will start playing the dog animation first as its the first animation added:

Next method

We can then call the next method to start playing the cat animation:

const player = document.getElementById('dotlottie-player');

player.next();

Previous method

Using the previous method will the dog animation again:

const player = document.getElementById('dotlottie-player');

player.previous();

And finally the reset method will also play the dog animation again, as its the first animation. If the 'activeAnimationId' was defined as a prop or inside the manifest with the cat animation id 'cat_animation' the reset method would jump to that animation instead.

Play specific animations

Playing specific animations from your .lottie is possible via the play method by passing the animation id or index of its position in the animations array of the manifest:

const player = document.getElementById('dotlottie-player');

// Play the cat animation
player.play('cat_animation');

// You can also override the manifest defined playback settings
player.play('cat_animation', { speed: 3, autoplay: true, loop: true });

If you're not sure what the animation ids inside your .lottie are, you can use the getManifest() method to find out:

const player = document.getElementById('dotlottie-player');

// Will log the manifest, and the animations it contains along with their id's
console.log(player.getManifest());