Use masks and trackmats in After Effects to isolate and animate specific elements of a composition, such as splitting and animating text layers for sequential motion. Understand the distinction between shape layers and masks, and how layer selection impacts tool behavior during animation setup.
Key Insights
- Masks in After Effects are vector paths used to isolate parts of a layer, and their behavior depends on whether a layer is selected—selecting a layer creates a mask, while no selection creates a shape layer.
- The animation project focuses on splitting the text "How Many of Us Adults Use Social Media?" into two parts using masks, enabling sequential animation with overshoot motion for each text segment.
- Noble Desktop's training emphasizes practical techniques such as manually sequencing layers, using keyboard shortcuts to manage layer hierarchy, and understanding how effects like drop shadows interact with layered graphics.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
Beginning of 3B, it's called Masks and Trackmats. It says if you did not complete the previous exercises, including the bonus, open this new file. So I'm going to File, Open Projects.
Great. It's in the Finish Projects folder, and it's called Infographic Animation Ready for Masks. I'll open that.
They'll tell me it was an older version that made it, so I'll say OK. It'll do the name Converted. Then the instructions say to go to File, Save As, Save As, and just basically save it in your own folder.
Okay, if you want to name it Version 2, that's fine. I'm just going to replace the old one I have. But if you want to save it as a Version 2 so it doesn't replace the one you made, you want to work on that, no problem at all.
Save it as a Version 2 or whatever you want. So this basically has all the copy-pasting things done so that all three of the Facebook, Instagram, and X (formerly known as Twitter) are animated. That's all it is, honestly.
That's all it is. So it's all to the bonus. And it's ready to work on the last part of the animation of this, which is the line, the headline, How Many of Us Adults Use Social Media? That's the idea, okay? So again, everything is happening simultaneously because the last step of this after we animate that line, that headline, will be effectively changing the layers where they start in the timeline so you get a sequential animation.
Headline is going to come up, Headline is going to come up, then all the X, all the Instagram, all the Facebook. That's the idea behind it, okay? It's called manually sequencing layers. That's the name of the section at the end of this, okay? So How Many of Us Adults Use Social Media? is the problem.
So, well, it's not a problem. It's just something to animate. Okay, so if I look at the done video.
Okay, so notice that I don't need to hear the music. It's annoying me. That animates up in two parts.
How Many of Us Adults Use Social Media? There's also a drop shadow here that is not actually on the layer, which we'll add. Okay, which is kind of fun. Okay.
Okay. Sorry, one second. Sorry.
I was really texting a lot of other instructors. I bring them, I bring other instructors lunch sometimes and they're saying like, Did you bring the lunch? Did you bring the lunch? It's like, I cook, by the way. It's funny.
It's a select. So, okay. So, social media.
Now, the first issue. It's one layer actually in Avex. That would have to be two layers.
Okay. That's the first issue. It is hidden until it passes some imaginary point and then it appears.
Okay, I bet. And then the drop shadow honestly is the drop shadow effects. That's all it is.
I mean, that's no big deal. That's the least impressive part. It's the fact that it's different pieces.
Okay. So, for the record, what we're going to do to cut up how many of us adults use social media, the instructions have you do it twice. If you were willing to, you could cut out every word as its own layer.
Okay. The only reason we don't is simply the time it takes to do that effectively. So, we'll do pieces, but the same exact approach could just be used to cut it down to smaller pieces.
Okay. The fact that I wanted to cut it up is why the drop shadow was removed in Illustrator. The original graphic reference had a drop shadow.
I got rid of it because trying to cut up a layer with drop shadows always looks horrible. So, that's why. Okay.
Now, to cut up parts of a layer, this really works only when there's space between them. Okay. So, how space, mini space, if they were all like merged together like this, I would not easily be able to cut it out using this technique.
Okay, the technique it's going to use is called masks. Okay, masks are a very common feature in many programs. Okay.
Now, here's the problem with this. Okay. So, in every other program on the planet, when I say the word mask, I am referring to an effect, something that hides part of a layer.
Okay. Now, certain programs may have multiple types of masks. For example, Illustrator has clipping masks, and it has, um, crap, what's it called? Opacity masks, I think.
Photoshop has clipping masks, layer masks. Layer masks can be vector-based or pixel-based, frickin' it's not. Okay.
But they all have the name because they hide something or they show something. Okay. In this program, a mask is simply a vector path on a layer.
Whether it shows, hides, or does nothing, it's still a mask. Okay. That is simply the name that it uses.
Okay. Now, masks, and so vector, by the way. The phrase I use is vector.
Vector artwork, if you're not familiar with it, is made from points and line segments. Okay. Does everybody remember from like, I guess high school math class, geometry, plotting points on graph paper? That's literally what frickin' vector graphics are.
Okay, it's point, point, line segment. Okay, that's all it is. It's literally high school geology.
This is literally what it is. Okay, so Illustrator makes vector graphics. Freehand, CorelDraw makes vector graphics, that sort of thing.
It's sort of many other stuff, by the way. It's pretty common. It's a certain type of graphic.
It's the opposite of, like, photographs, which are like little squares of color. Okay, now, so let's talk about vector-based. In this program, masks are made using the shape tools or the pin tool.
There's also a way to take a text layer and convert it into mask. It's a command, but it's not masked by default. Okay.
Now, here's the problem. So here's the first problem. Well, I don't know first, but here's the problem.
Okay, so one, I'm going to take that layer and move it to the top. Okay, I'm lazy. I use the keyboard shortcut, command shift, right bracket, control shift, right bracket, pushes the highlighted layer to the top.
Left bracket, command shift in the left bracket, puts it to the bottom. That is literally the Photoshop in Illustrator keyboard shortcuts for moving up and down. Okay, I followed that, by the way.
You can just drag it as well. If you don't want to use the keyboard shortcut, that's fine. I like keyboard shortcuts because they're fast and they impress people in all the program.
Nothing wrong with being thought of as a wizard, by the way. It's pretty cool. If I have a layer selected, when I use the shape tools or the pen tool, I will make a mask on that layer.
The shape tools, if you press and hold, rectangle, rounded corner, rectangle, ellipse, polygon, and star. Standard shape tools in most design programs. Okay, rectangle, click and drag.
That is a mask. Okay. With the selection tool, I can click on the point of a mask, which will give me a bounding box.
Which I can then resize and shape the mask and rotate it and that sort of thing. Okay, but that is a mask. See, it says mask.
Okay. However, if you use the same tool and do not have a layer selected, the exact same tool now has colors over here and that makes a shape layer. Okay, so the shape and pen tools can make shape layers, which are independent layers.
There's a shape layer one there. Or they can make masks. It's always a matter of, do you have a layer selected? Yes, mask.
No, shape layer. Okay. Shape layers are kind of like the way Illustrator makes relics or the way Photoshop has shape layers.
They can have color, they have appearance, that sort of thing. They're for graphics. They're main graphics, basically.
Now, okay, so it's always a matter of what you have selected. So that mask I made was set to a behavior of add. Whatever's inside the mask is visible.
Okay, whatever is outside the mask is hidden, but you can swap that behavior. Mask and add, subtract, and do many other things. Okay, mask can be animated, but they're very commonly used in situations like this to like isolate parts of a layer.
So the instructions are going to have you isolate how many of us adults and then use social media to make two layer copies. But if you wanted to, you could literally split each word out to its own layer and animate like one word, two words, three words, four words. Okay, you could.
If you were willing to sit there and make masks for each of the words, you definitely could. Okay, now here's what it has you do. The two parts eventually, headline one, headline two, headline beginning, headline end, are going to animate the same way.
Okay. They're going to be down, they're going to go up, and they're going to end resting here. Okay, so they start, they initiate, they overshoot, and they come to rest.
That's like the three names of like the parts of their overshoot animation, okay? So my other problem is this, how do I know how far it should overshoot? Let's find out.