Gain an understanding of how text animators in After Effects work exclusively with live text layers to create dynamic, character-level animations. Understand the role of range selectors and animatable properties in crafting effects like typewriter and fade-in sequences.
Key Insights
- Text animation in After Effects requires the use of animators, which allow you to control properties such as opacity, scale, and position on a character, word, or line basis within a live text layer.
- Presets like "Typewriter" and "Fade Up and Flip" apply built-in animation effects, and each is composed of two parts: a property (e.g., opacity) and a controller (e.g., range selector) that defines which text is affected over time.
- Noble Desktop emphasizes that without using text animators, achieving similar effects would require manually animating multiple individual layers—making animators a more efficient and flexible solution for motion graphic designers.
So, one, this is only a feature of text layers. Now, any Animator at all can be applied character by character, which would be letter by letter, basically, word by word or line by line. Okay, so, for example, if I type out these words, by the way, now, I can always manually change this.
So, look, I can take Fox and I can resize it. I can take over and we did that. We just did that, basically, right? I can take all these lines and screw with their letter.
Okay, but none of this can be animated. The properties in the properties panel or character or paragraph are not animatable by themselves. So, I can set them as we did when we made the base text, but I cannot physically animate from here.
Notice that there's no stopwatches. At all. Text can only be animated using an Animator.
So, the concept of text animators is specifically unique to live text layers. Text layers you can format in here. Okay, now, so, and it's only for this.
So, if I were to, for example, go to my presets over here, effects and presets, presets, there's a typewriter preset, by the way, t-y-p-e writer. Although there's two of them, blink and cursor and typewriter. Okay, I'll do blink cursor.
It's cool. I'll drag that on the text layer. That's not what it does.
It adds like literally a blinking cursor writing out the text. The regular typewriter one doesn't have a blinking cursor, but same basic difference. So, what it's doing is effectively animating the text.
It can be the character by character, word by word, or line by line, depending on what the preset is. And there's many presets. So, for example, in presets, there's like, again, text, animate in, fade up and flip.
I got no clue what this does, by the way, at all. They fade up and flip in like that in 3D. Okay, I'm going to turn that on.
No, I think that's a scale trick is what it's doing. Now, so that's the first thing. So, they're only for text.
Now, they can be applied to any amount of text though. So, for example, if I have one paragraph, that would work the same in one paragraph versus two versus one word. So, they are very reusable, which is nice, by the way.
Now, so that shows how they actually work though. An Animator is composed of two parts. One is some kind of property, let's say opacity.
And two, something that tells it what to control. By default, a range selector. So, it selects a range of text, normally from beginning to end.
I have not animated anything at the moment, but I'm going to lower opacity to zero. All of the text is now transparent. Okay, actually, I'll do less than zero.
So, you can actually see it like that. So, all the text is now 17%, right? But only the text between the pair is 17%. If the range selectors were moved, the text will return to what any text not between them returns to what it was before that property was added.
Okay, so you've got the base appearance of the content. It's base fill color, it's base stroke color, it's base opacity, it's base position, it's base scale. And what the animators are doing is modifying that.
They're adding to it. So, your start layers opacity plus what that is saying and modifies it. What the Animator is doing when you change the range selector is it's basically allowing it to return to its original appearance.
So, 17% or 0% opacity now. But as the range selector animates, notice all the text is wrapped in it. I'll grab that or change the number.
But as it gets towards the end, no text is wrapped by it because they're in the same place now. So, the result is it goes from all the text being transparent, being zero, to word by word not being zero. I'm gonna slow it down a lot, by the way.
Like that. A text layer is visual. So, it does have the same parts that everything else does.
Positioning, anchor point, rotation, opacity, and scale. But those properties, by definition, are layer-based. So, what if you want this? What if you want to fade in word by word? Okay, if it's not a text layer using an Animator, I would have to have the first word as one layer, second layer, third layer, fourth layer, fifth layer, and then I'd have to animate them opacity, opacity, opacity, opacity, opacity.
So, I'd have to animate them individually. It's annoying, but I could do it. But if they are a text layer, hello text, that exact same thing I just described could be done by simply changing, by building this way.
I just did two keyframes, right? So, let there open, advance, open, based on words. That is now exactly what I described. You fade in, you fade in, you fade in, you fade in.
And I can change, it's a live text. So, you change the font, you change the words, you can change anything you want because it's live text. So, in a text layer, the smallest individual item is a character.
The largest individual, the largest group of items would be a line. They don't have paragraph control because their comment would be, if you got a paragraph, we don't know what to tell you. That's a lot of text, you got a paragraph.
So, they basically do character, word, and line level. So, right now, what I've got is that same fade effect happening line by line. Which, if I wanted this as not a text layer, one layer, two layers, three layers, four layers.