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!

--

--

--

Full stack developer and Lottie animator 🧪

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Package.JSON & Package-lock.JSON- Angular

8 Performance Hacks for JavaScript

NestJS, TypeORM and PostgreSQL — full example development and project setup working with database…

Anonymous Type in C#

React Minesweeper Prototype

6 nifty Javascript nick-nacks for the new year

Build a “Serverless” Stripe Store in 5 Minutes with Node.js and StdLib

Modify User Provided UI with Content Directives

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samuel Osborne

Samuel Osborne

Full stack developer and Lottie animator 🧪

More from Medium

Designing a Music app: Voice Music app

Google Playstore Web app

Shopify Product Scraper

Appointment scheduling on your WordPress website — Now with Amazon Alexa skill