How to Change Text in iOS Lottie Animation

✅ Updated for Lottie 4.2.0

It’s been a while since I covered topics related to Lottie animation. In my previous article, “Modifying Lottie Animation with Value Providers“, I discussed how developers can leverage different kinds of value providers to manipulate an animation during runtime based on their own needs.

In this article, let’s take a look at another less-known yet pretty useful value provider in the Lottie SDK — Text Provider. As you might have guessed, a text provider allows you to change the texts within a Lottie animation during runtime.

Wanted to know more? read on!

Note:

To learn how to set up Lottie animation in your iOS project, you can refer to the “Lottie for iOS Installation” section in this article.

---

Identifying Dynamic Texts in Lottie Animation

Before getting into the sample code, there is an important aspect to be noted — Not all texts within a Lottie animation are dynamic texts. This also means that not all texts within a Lottie animation can be changed, it has to be a dynamic text.

In order to identify dynamic texts in a Lottie animation, we can utilize the Lottie Editor. Let’s say we have this Lottie animation and if you load it into the Lottie Editor, you will see 3 dynamic text layers that allow you to modify its content.

On the other hand, if you load this Lottie animation, you won’t see any dynamic text layer being shown. This means that the text you see in the animation is rendered as pure graphics and not dynamic text.

---

The Text Provider in Action

In order for text replacement to work in Lottie animation, we must first find out the key paths for each dynamic text layer. To do so, you can use the AnimationView‘s logHierarchyKeypaths() function to print out all the possible key paths.

Let’s use the following Lottie animation as an example:

As you can see from the above screenshot, “look around“, “the remainder of” and “day trip” are the key paths that we are looking for.

After identifying all the key paths, we will then use the DictionaryTextProvider class to replace the Lottie animation texts. It is a class that accepts a dictionary where its key is the key path and its value is the replacement text.

Here’s the sample code:

// Set the animation
let animation = LottieAnimation.named("23133-word")
animationView.animation = animation

// Change the texts using text provider
let dict = [
    "look around": "Hello World",
    "the remainder of": "From",
    "day trip": "Swift Senpai",
]
animationView.textProvider = DictionaryTextProvider(dict)

// Play the animation
animationView.play()

The code snippet above is pretty straightforward. First, we create an animation object and set it to the animation view. After that, we populate the text provider’s dictionary using the key paths we obtained earlier. With the dictionary in place, we can then use it to initialize the DictionaryTextProvider and set it to the animation view.

Here’s the final result:

---

Creating a Custom Text Provider

Let’s say you would like to improve the usability of the sample code and reuse the modified animation at multiple places within your app, this is where the AnimationTextProvider protocol comes into action.

public protocol AnimationTextProvider: AnyObject {
    func textFor(keypathName: String, sourceText: String) -> String
}

As you can see, the AnimationTextProvider protocol has 1 function requirement that takes care of replacing the animation source text with the desired text.

The textFor(keypathName:sourceText:) function will trigger for each dynamic text layer within the Lottie animation. Therefore, what we need to do within the function is to return the desired replacement text based on the given key path.

With that in mind, we can implement the custom text provider class as such:

final class MyLottieTextProvider: AnimationTextProvider {
    
    let dict = [
        "look around": "Hello World",
        "the remainder of": "From",
        "day trip": "Swift Senpai",
    ]
    
    func textFor(keypathName: String, sourceText: String) -> String {
        // Return the desire text based on key path
        // If not available, use the source text instead
        return dict[keypathName] ?? sourceText
    }
}

Here’s how we can use the custom text provider:

animationView.textProvider = MyLottieTextProvider()

Pretty cool isn’t it? 😎

---

Further Readings

• Getting Started with Lottie Animations in iOS
• Lottie Advance Animation Playback
• Controlling Lottie Animation with Markers
• Modifying Lottie Animation with Value Providers

---

Wrapping Up

There you have it! The Lottie text provider is pretty easy to use yet extremely flexible. If you can think of any other interesting use cases for the AnimationTextProvider protocol, feel free to let me know in the comment section below.

If you like this article, 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.

---