How To Setup Named Markers in Lottie animations

Photo by Jacob Miller on Unsplash

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

1. Setting up in After-Effects

Inside of After-Effects open up you composition and place the play-head on 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. My animation is split in to three parts so my two other markers look like this:

and:

Once thats completed, render your Lottie animation. We will now see how to use the named marker in code.

2. Setting up on the web

For this demonstration I will be using the player from LottieFiles: 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!

Animation by Christina Bublyk

The codepen for this tutorial is available here:
https://codepen.io/Osbro/pen/OJjLgLp

If you’re looking for more Lottie tutorials and tips you can find me on YouTube.

My other socials

Thanks for reading, hope it helped!