How to make text flow up in After Effects

Usually text flows down, since that’s how we read. But often times a UI will have the text flow up to keep the user focused on the line they are typing (see: messaging apps).

When it comes to mimicking this behavior in After Effects, there isn’t a native way to do this.

That’s why I added the Text Up feature to Type – a Script UI for working with text layers in After Effects.

How it works

Text Up applies an expression to the position property of your text layer. For each line break in your text the position of your text layer will shift up equal to the leading of the text.

How to animate the text

You can animate the text being typed in using the Typewriter+ function (or preset).

How the expression works

The Text Up preset applies the expression for you, no code required. But if you’d like to understand how the expression works, read on.

As mentioned earlier, this expression is on the position property of the text layer. First, we need to get the actual text. And since we’ll need this throughout the expression, it’s useful to create a variable.

src = text.sourceText;

Next we’ll need to determine the leading of the text (the space in between each line). You can access the leading of the text with the following code:

breakHeight = src.style.leading;

However, this doesn’t work if the leading is set to auto. Auto leading means that leading will be set to 120% of the font size. We can use an if statement to check if auto leading is on, then grab the font size, then multiply it by 1.2.

if (src.style.autoLeading) {
    breakHeight = src.style.fontSize * 1.2;
} else {
    breakHeight = src.style.leading;
}

Now that we have the line height figured out, we need to determine how many line breaks are in the text itself. To do this, we need a for loop. The following for loop will allow us to look at each character of the text.

for (i = 0; i < src.length; i++) {
    // rest of the code will go here
}

Since we want to count how many line breaks there are will create a variable call breakCount and initially set it to 0 outside of the for loop. Then within the for loop we will add 1 to breakCount every time a break is detected. Unlike most characters, you can’t really put a line break in between quotations, so “\r” is used instead.

breakCount = 0;

for (i = 0; i < src.length; i++) {
    if (src.charAt(i) == "\r") {
        breakCount++;
    }
}

Now that we have the breakHeight and breakCount we can multiple them together, then subtract them from the y position. This will give us our final y coordinate.

textUp = breakHeight * breakCount;
posY = transform.position[1] - textUp;

Finally we can wrap the original x position and our new y position in an array in order to complete the expression.

[transform.position[0],posY]

Now whenever you and a line break to the text, the position will shift up accordingly!