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.

Twitter like button

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 where you can use it 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.

Marker information in animation 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 = Animation.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.

Control animation playback using markers

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”.

Set AnimatedButton as custom class

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.

Connect AnimatedButton to IBOutlet

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

// Set animation to AnimatedButton twitterButton.animation = Animation.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 that 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.

Twitter like button

Wrapping Up

Animated button is just one of the use cases of markers. You can also use markers to animate other custom controls such as switch, slider and progress bar.

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. 🧑🏻‍💻