How To Setup Named Markers in Lottie Animations

Using named markers in your Lottie animations allows you to clearly define and document the different segments of your animations, allowing you to choose which part to play easily.

1. Setting up in After-Effects

In After Effects, open up your composition and place the play head where you would like the segment of your animation to start and press the marker button to create it:

Once you see the marker appear on the timeline, double click it, and this menu should appear:

In the "Duration" parameter, you can define the length of your segment, and in the comment section, you can define how you want the segment to be named. The format is as follows:

{
"name":"SEGMENT_NAME"
}

My first named marker looks like this:

You can have as many markers as you want. I have split my animation into three parts, so my two other markers look like this:

and:

Once that's completed, render your animation. We will now see how to use the named marker in the code.

2. Setting up on the web

For this demonstration, I will be using this player: https://github.com/LottieFiles/lottie-player

In your HTML file, simply load your animation as you may be used to.

<div class="container">
  <lottie-player
                id="exploding-bird" 			  src="https://assets2.lottiefiles.com/private_files/lf30_k9zqevoo.json"
                autoplay
                loop>
    </lottie-player>
</div>

In our JavaScript, we have to use the 'goToAndPlay' method rather than the 'playSegments' method when using named markers:

let animation = document.getElementById("exploding-bird");

animation.addEventListener("ready", () => {
  
  let animationData = animation.getLottie();
  
  animationData.goToAndPlay("bird", true);
 
});

With 'goToAndPlay', you pass the name of your named marker you defined in After Effects, and with 'autoplay' and 'loop' set on the Lottie-player, your animation will loop over your defined segment!

You can have a play around with this animation here:

Here is a video tutorial that shows you how to use named markers in Lottie animations:

We hope you had fun with this quick tutorial on How to set up Named Markers in Lottie animations.