Controlling Lottie Animation with Markers

✅ Updated for Lottie 4.2.0

In this article, let’s talk about what are markers in Lottie animation, how it works, and why it is so useful. In the last section of this article, you will also learn how to create a beautifully animated Twitter like button using markers.

Before we get started, make sure to check out my previous articles where I talk about the basics of using Lottie animation and some advanced animation playback techniques.

🔗 Getting Started with Lottie Animations in iOS

🔗 Lottie Advance Animation Playback

With all that being said, let’s begin!

---

What is a Marker?

Marker is a way to represent a specific frame (or progress time) in Lottie animation by using a key name. You can imagine it as a pin on the map that you can use to navigate to a specific location.

When creating an animation, designers can mark playback points for developers to use without having to worry about keeping track of animation progress time or frames.

Furthermore, if designers wanted to change or update the animation in the future, as long as all the markers remain the same, no code change is required on the developers’ side.

---

Getting Marker Information

The marker information is encoded within the animation JSON. This means that you can open the animation JSON with a text editor and extract the information from the JSON.

Note:

Not all Lottie animations have markers. Animations that are purely decorative (do not involve user interactions) usually do not have any markers.

Another way to retrieve an animation’s marker information is by using the Lottie library’s APIs. For the following example, I will be using the TwitterHeartButton.json sample animation that can be obtained from the Lottie example project on GitHub.

Here’s the code that demonstrates how to list out all the markers, as well as the progress time and frame for each marker.

let jsonName = "TwitterHeartButton"
let animation = LottieAnimation.named(jsonName)!
let markerNames = animation.markerNames
for name in markerNames {
    print("Marker: \(name)")
    print("Frame: \(String(describing: animation.frameTime(forMarker: name)))")
    print("Progress: \(String(describing: animation.progressTime(forMarker: name)))")
    print("")
}

Here’s the console output:

Marker: touchUpCancel
Frame: Optional(1.0)
Progress: Optional(0.008620689655172414)

Marker: touchDownStart
Frame: Optional(33.0)
Progress: Optional(0.28448275862068967)

Marker: touchDownEnd
Frame: Optional(38.0)
Progress: Optional(0.3275862068965517)

Marker: touchUpEnd
Frame: Optional(104.0)
Progress: Optional(0.896551724137931)

With the marker information that we get, we can now look at how to control the animation playback using markers.

---

Animation Playback Using Marker

Similar to progress time and frame time, you can also use markers to control the Lottie animation playback.

animationView.play(fromMarker: "touchDownStart",
                   toMarker: "touchDownEnd")

By using markers, you can easily play a certain portion of animation without knowing the actual frame or progress time. Furthermore, it also makes your code more readable.

The following animated GIF demonstrates using markers to control animation playback.

---

Button with Lottie Animation

In the last section of this article, I will show you how to leverage markers to create a beautiful Twitter like button.

We will be using the AnimatedButton class included in the Lottie library to create the button. By using AnimatedButton we can easily create a Lottie animation button with just a few lines of code.

First, head over to your storyboard and add a UIView to your view controller.

Note:

Make sure you are not adding a UIButton to your view controller because AnimatedButton is a subclass of UIControl, thus you will not be able to set AnimatedButton as a custom class of UIButton.

Next, set the UIView custom class as AnimatedButton and set the module to “Lottie”.

After that, open your view controller class, create an IBOutlet named twitterButton and connect it with the AnimatedButton that you just added in the storyboard.

Lastly, paste the following code into your view controller’s viewDidLoad() method to properly configure the twitterButton.

// Set animation to AnimatedButton
twitterButton.animation = LottieAnimation.named("TwitterHeartButton")

// The animation goes outside of the bounds, thus turn off clipsToBounds
twitterButton.clipsToBounds = false

// Set animation play ranges for different button state
twitterButton.setPlayRange(fromMarker: "touchDownStart",
                           toMarker: "touchDownEnd",
                           event: .touchDown)

twitterButton.setPlayRange(fromMarker: "touchDownEnd",
                           toMarker: "touchUpCancel",
                           event: .touchUpOutside)

twitterButton.setPlayRange(fromMarker: "touchDownEnd",
                           toMarker: "touchUpEnd",
                           event: .touchUpInside)

Note how you can set the animation play range based on the UIControl events by using the setPlayRange(fromMarker:toMarker:event:) method.

That’s it! Build and run your project to see the Twitter like button in action.

---

Wrapping Up

The animated button is just one of the use cases of markers. You can also use markers to animate other custom controls such as switches, sliders, and progress bars.

Feel free to get some free Lottie animation from https://lottiefiles.com/ and start creating your own beautifully animated custom controls.

If you find this article useful, you should definitely check out the following article where I will show you how to modify Lottie animation at run time using value providers.

🔗 Modifying Lottie Animation with Value Providers

I will be covering some other topics related to Lottie animation in my future articles. If you would like to get notified when a new article comes out, you can follow me on Twitter and subscribe to my monthly newsletter.

Thanks for reading. 🧑🏻‍💻

---

👋🏻 Hey!

While you’re still here, why not check out some of my favorite Mac tools on Setapp? They will definitely help improve your day-to-day productivity. Additionally, doing so will also help support my work.

• ✨ Bartender: Superpower your menu bar and take full control over your menu bar items.
• ✨ CleanShot X: The best screen capture app I’ve ever used.
• ✨ PixelSnap: Measure on-screen elements with ease and precision.
• ✨ iStat Menus: Track CPU, GPU, sensors, and more, all in one convenient tool.

---