Split Method in After Effects

In this post, I will go over the Split Method in After Effects. So without any further ado, let’s dive right in!

Alright, so here we are in After Effects and for this example, I am going to pick up where we left off in tip number 35. If you remember, we talked about charAt().

If you haven’t seen it, then you should check it out before you go any further with this tutorial. It will make a lot more sense if you watch that tutorial first. Let’s do a quick review.

charAt() in Adobe After Effects

In tip 35, we had an orange circle in the composition with a white letter U in the center of it and I also had a text layer UKRAMEDIA below the orange circle.

If I change the UKRAMEDIA text to let’s say SERGEI, the white letter inside of the orange circle would automatically change from U to S.

Chaning text in After Effects

So the white letter inside of the orange circle automatically grabbed the first letter of the text layer below.

If I change the text from UKRAMEDIA to another name like ELIJAH, the white letter inside of the orange circle will automatically change from S to E. You get the idea. All of that was possible because of charAt() Expression.

Elijah text change in After Effects

Since then, some of you have been asking me how to set it up with two words instead of just one where the text inside of the circle grabs the first letter from the first word and then the first letter from the second word.

charAt Ukramedia with two words first letter grab in After Effects

Let me show you how to set this up with Split Method.

The Split Method

The first thing I want to do is actually explain to you what Split Method does. So for this example, I have a text layer with a bunch of words

Text with a bunch of words in After Effects

I also have the split method text layer below it.

Split method text layer in After Effects

I am going to ALT+Left Click (OPT+Left Click on a Mac) on the Source Text stopwatch icon.

Click on the stopwatch icon in After Effects

Next, I’m going to pick-whip to the Source Text of my first text layer.

thisComp.layer(“ONE TWO THREE FOUR FIVE SIX”).text.sourceText

Pickwhip to the source text in After Effects

This will basically copy our text like so:

Coping text with pick whip in After Effects

I will keep going by adding .split(“”) at the end.

thisComp.layer(“ONE TWO THREE FOUR FIVE SIX”).text.sourceText.split(“”)

Watch what happens when I let go.

split() method in after effects

As you can see it splits every single character into a separate index.

For example, right now I can easily call out index 2, which would be the letter E. Remember, we start counting from 0. So index 2 in the word one would be the letter E because O is zero, N is 1, and E is index 2.

Index count in After Effects starts with 0
So in order to call out for index 2, we need to add square brackets at the end and say index 2 inside of it like this:

thisComp.layer(“ONE TWO THREE FOUR FIVE SIX”).text.sourceText.split(“”)[2]

You should now see E in your composition.

Index 2 is E in After Effects

So you get the idea, but watch what happens we I add space inside of the .split quotations split(” “):

thisComp.layer(“ONE TWO THREE FOUR FIVE SIX”).text.sourceText.split(” “)[2]

Adding a space inside of the split method quotation in After Effects

So now instead of splitting each character, it splits each word. So anywhere there is a space is, it is going to split that into a separate index.

For example, right now index 2 would no longer be E. Instead, it will be the word THREE. The first-word ONE would be index 0, the second word TWO would be 1 and the third index would be the word THREE.

Index count of words in After Effects

So now if I type index 2 inside of my square brackets, it will give us the word THREE instead of E.

Three inside of our composition in After Effects split method

Let’s keep going with this. I am going to undo what I just did and instead of adding a space inside of our split method quotations, I will add a forward slash between TWO/THREE and between FOUR /SIX. I will also a forward slash inside of the split method quotations .split(“/”).

thisComp.layer(“ONE TWO THREE FOUR FIVE SIX”).text.sourceText.split(“/”)

Adding forward slash in split method in After Effects
So the forward-slash will determine where the splitting point will be for our indexes. It will split our words into different indexes.

So now ONE TWO will be its own separate index and then THREE FOUR would be its own separate index and then FIVE SIX and so on so. You get the idea.

Let me show you visually what I’m talking about it.

It will put a comma right where my forward slash is and so now index 2 will become FIVE SIX. So if I call out
index 2,  you can see that it gives us FIVE SIX.

thisComp.layer(“ONE TWO THREE FOUR FIVE SIX”).text.sourceText.split(“/”)[2]

Calling out index 2 in After Effects split method

Now that you know what I am talking about, let me show you a practical example of this.

Alright, so now we are going to pick up where we left off from tip 35. As you can see, right now we are grabbing the first letter from this text here.

Tip 35 example from Ukramedia in After Effects

Now let me show you how to set it up to where it grabs the first letter from the first word and then the first letter from the second word with the Split Method.

First, we need to call out the nameText, so we need to remove the .charAt(0) from the expression below:

nameText = thisComp.layer(“UKRAMEDIA”).text.textSource;

nameText.charAt(0)

It should now look like this instead:

nameText = thisComp.layer(“UKRAMEDIA”).text.textSource;

nameText

You should now see our NATALIE PATRICK text appear in big letters over the orange circle.

nameText in After Effects

Next, I will keep going by splitting that text into 2 indexes where there is space by adding space in between our quatations inside of split(” “).

nameText = thisComp.layer(“UKRAMEDIA”).text.textSource;

nameText.split(” “)

Now NATALIE is index 0 and PATRICK is index 1.

Natalie Patrick index 0 and 1 in After Effects
Now I am going to call out index 0, which is NATALIE inside of my square brackets.

nameText = thisComp.layer(“UKRAMEDIA”).text.textSource;

nameText.split(” “) [0]

Natalie index 0 in After Effects

I will keep going by adding .charAt() at the end like so:

nameText = thisComp.layer(“UKRAMEDIA”).text.textSource;

nameText.split(” “)[0].charAt(0)

I want the first index from the word NATALIE. I want the first character N, which is index 0.  So if I let go, it will give me N, which is exactly what I am after .

charAt(0) NATALIE in After Effects

In order to add the second word and letter to the circle, I first have to select and copy

nameText.split(” “)[0].charAt(0)

Then add + after nameText.split(” “)[0].charAt(0) and paste the same thing there like so:

nameText.split(” “)[0].charAt(0) + nameText.split(” “)[0].charAt(0)

Two letters inside of the orange circle in After Effects

Now we have two characters inside of our orange circle, but they are both N. It is grabbing the first letter from NATALIE from index 0. Let’s change that.

All we need to do is change the second index to 1 instead of 0 because remember, index 0 is NATALIE and index 1 is PATRICK.

Index 1 and index 0 in After Effects

You can see that things are working quite well. I hope you found this post useful. If you would like to learn more about Expression and how it can speed up your workflow in After Effects, check out my Learn After Effects Expressions Course.

About the author:

Sergei Prokhnevskiy

Sergei Prokhnevskiy is a Charlotte, NC based motion graphics designer, an online tutor, an entrepreneur, and Adobe MAX Master Speaker. Sergei is known for his quick and practical After Effects tips and tricks on YouTube, where he generated well over 6 million views on his tutorials. He has authored an online video course on After Effects Expressions and developed scripts for After Effects. He is also a former senior motion graphics designer at Fox Sports where he worked on graphics for NFL, Super Bowl, MLB, World Series, College Football, NASCAR, Women’s World Cup, and NASCAR Race Hub. He is very passionate about learning and teaching others.

5 FREE TIME-SAVING TOOLS

Over 100,000 downloads & counting!

These 5 After Effects tools will seriously speed up your workflow and save you hours of wasted time. More than that, they could be the difference between being able to complete a project on time or not!