animate the amount of text on a path (After Effects)

[Filip Vandueren]

Hey,

add a slider to your Text Layer,

the give the sourceText this expression:

numChars = Math.floor(effect("Slider Control")("Slider").value);
value.substr(0,numChars)+"\u200b";

The slider now controls how many characters are visible.

Adding the +”\u200b” (unicode character #200B = a zero width space), this makes the start and end characters line up with the same spacing as all the other characters along the path do.

If you omit this, they will hug each other without any spacing.

[Alessio Rattazzi]

Thank you very much Filip! Really clever idea 😎 it works perfectly!

wish you a lovely evening
Alessio

[Alessio Rattazzi]

Hi Filip!
Do you know how I could modify the expression so that the slider will let appear the entire words and not individual letters one after the other?

kind regards and thank you in advance
Alessio

[Filip Vandueren]

Hi Alessio,

I would do it like this:

words = value.split(/\W+/g);
numWords = Math.floor(effect("Slider Control")("Slider").value);
words.slice(0,numWords).join(" ")+" \u200b";

split() makes the string an array of words, slice() limits the number of elements from the array, and join() converts it to a string again

In this case I think I’d add that extra space before the \u200b.

[Alessio Rattazzi]

thanks a lot Maestro! Works perfectly

wish you a lovely weekend
Alessio

[Alessio Rattazzi]

I just notice that the expression is working but is not showing special characters: like “ü” or “?”, any idea why instead of those there’s an empty space?

thanks a lot again
Alessio

[Filip Vandueren]

Ah, sorry, I use the wrong split() parameter, this works:

words = value.split(/\s+/g);
numWords = Math.floor(effect("Slider Control")("Slider").value);
words.slice(0,numWords).join(" ")+" \u200b";

\W is any character that’s “not a word character” and it’s too strict (it only matches a-z, 0-9),
while \s is any “whitespace” character, which we need in this case.