Mastering Custom Easing with the After Effects Graph Editor: Value and Speed Graphs

This lesson is on creating custom easing with the graph editor. Specifically, we're going to look at the value graph first, and then we'll look at the speed graph. So there are actually two parts of the graph editor to make custom easing graphs.

For this, we'll be using the using the graph editor started file in the using the graph editor folder. I'll just open it. It'll open up.

Again, I'm gonna get this message. If you open a file made with an older version of the program, this is always going to happen. The program simply updates it by adding the word converted to it.

This is so that when you save it, it doesn't automatically override the old file. AE files are not backwards compatible. So if you have a file made in 2025 or 2024, even the previous version can't open it.

So I made our class files a little older so that even if someone's using an older version, not the current one, it would still work. So I'm just going to save as. I'm just going to rename this.

You can call it whatever you want. I'm calling it my name, which is Jeren, and just graph. So have fun with that.

Okay, so there are actually two sequences here. Value graph creating a bounce in. It's just this animation.

All this is, if I just press U on the keyboard to show it, there's some basic position animation. That's all. It's like one second of position animation.

They all just fly in to end up here. Zelda Quest and Dark Dungeons. And before anybody questions my geek cred, yes, I know that Zelda is the princess.

This is a joke on that. Okay, Link is the one who actually does the questing. At least in most of the series.

So I'm gonna hide all that and that's good. This section will cover the value graph and then the next lesson will cover the speed graph. Okay, so what I want to do is add a little bounce in on this.

So instead of just sliding in like this, it's kind of boring. This is kind of boring. I admit that.

I want to actually have them bounce in. So they'll delay back, back, back like this. I'm just gonna like, do it like that.

To do this, I'm going to add more keyframes specifically for the position property. Now, what I have, I'll go to the end of this, is Zelda Quests in Dark Dungeons. The order kind of annoys me.

So I'm gonna highlight Zelda, I held down shift, click on Dungeons. And what they do is select in Zelda Quests in Dark Dungeons in that order. So when I cut this, Command X or Control X for Windows users, and paste again, that's Command V or Control V. It pastes in the opposite order.

So it's a very quick way of reversing order layer here. So I'm gonna do this to Zelda and you'll get the idea of how it's done. This is my first layer and then you can apply it to the rest for practice if you want.

But really, once you understand how you would create this bouncing effect here, it's simply a matter of taking the time to actually do it. So I'm gonna press U on the keyboard to show the keyframes. And now here's my problem.

So the way position is set up, I actually can't use the value graph the way I want. So what I'm gonna do is an option in the position property to separate it. I'm gonna right-click, separate dimensions.

This all separates position into two different properties, which I can control. And in this case, it's just the X that I'm doing. I could actually delete the keyframes for Y because they don't actually do anything in this case.

But all I gotta do is do X really. So I'll have it highlighted and then I'm gonna open the graph editor. The graph editor is this button to the right, right before you get to the time ruler.

And it switches the main timeline display into a graph editor display. And again, I'm gonna go in here. I'm gonna use the zoom bar at the top of the timeline to zoom in on this area.

You could also use the keyboard shortcuts. You could also use the zoom in button. Same difference.

This is another way of controlling what part of your timeline you are viewing and magnifying. Now I wanna make sure I'm in the right graph. This is supposed to be the value graph.

So it's the second button on the bottom, edit value graph. Yes, I am there. There actually is the value graph and speed graph.

There's also an option to auto select. So if that was enabled, sometimes you'll come in and you're in the wrong graph. So I am specifically in the value graph for this.

I am specifically in the value graph for this part. I'm gonna actually zoom in a little bit more like that. So I can really see where I'm getting down to.

Okay, so basically what I wanna do is add a series of additional keyframes. I'm then gonna change their value so that I have a kind of like bounce behavior. Where it like finishes, finish, completes, finishes, finishes, completes, that sort of thing.

So it'll be off screen, finished on screen, back out a little bit, finished on screen, back out a little bit, finished. So I'm gonna do that double bounce effect. To do that, I need to add additional keyframes right along this value line.

Because that's what this is. This is basically the value of the property over time. So this is a one second animation.

So I figure I'm gonna go about halfway through this. And I'm gonna hold down on my Mac command. If you're on Windows, you hold down control.

And that changes your selection tool into this little pin plus which adds keyframes. Click. And I'm gonna add a couple more.

I'll go about a little quarter of the way through. I can adjust this later. So command click, command click, command click.

Okay. Now, what this actually does is add keyframes. If I go back to the main timeline display, I'll turn off the graph editor.

I now have more keyframes. Okay. If I move them around, go back to the graph editor.

If I go back to the main timeline display, notice the keyframes are closer. So what this is basically doing is adding keyframes. Okay.

Now I want to change them. I want to create a series of mountains. I'm just gonna drag that straight up.

Okay. And the program will give you a little hint that you're lined up with the previous ones. I'll go to the one in the middle.

Same thing. I'm gonna line it right up. So they're all lined up together.

I'm gonna take the ones between the ones that are at the base level and just pull them back a little bit. So off screen, on screen, back out a little bit, off, finished, back out a little bit, finished. And I'm gonna make that about halfway.

So it's halfway off the screen. I'm gonna adjust my work area bar. So I'm gonna move it to the end, press in.

So the work area, the preview is only gonna be this area. I'm gonna press spacebar to preview. And I can see that that's what happens to Zelda.

And for the record, only to Zelda because that's the only one I have here. Okay. So it bounces out.

Now it does in fact bounce out. It does do what I wanted. Okay.

Maybe not exactly the way I like, but it's pretty cool. So I'm just gonna play with this a little bit. Maybe adjust the timing a bit to see what I like.

And I can just keep previewing that. Okay. Maybe this one shouldn't go quite as far, a little more centered.

And again, as I adjust it, it's still previewing in real time, so I can get an idea of what it looks like for me. Actually, I'm gonna go back a little more for this. Trying to make these about halfway.

There is no exact agreement on what this should look like. It really depends on the movement, how far it's moving, how fast you want it to go, that sort of thing. So it's really about a lot of trial and error.

I'm gonna stop my preview. Now, so you can adjust it in real time. You'll see the preview changing and updating in real time.

And you get kind of what you want. However, the problem is this movement is really, really way too linear. Really what this should be is more curving.

So let's do that. On your keyboard, if you hold down the Option key if you're on Mac, or Alt key if you're on Windows, you can actually click on these anchor points. I'm gonna do it to each of them, by the way.

And turn them into smooth points. I'm just clicking, clicking, clicking. The smooth points have... I accidentally selected these.

I'm gonna deselect those. The smooth points have handles that the corner points do not. Okay.

So now I can actually adjust these manually. So let's say I want to actually make a curve out of this. I want to actually make a curve up in this case.

So I'll grab that one, more rounded. I'll grab this one, more rounded. But if I try to adjust the second handle, it just changes that.

It screws it up. This is another job for the Option or Alt key. Click and drag on a handle and it separates it.

Like so. So the Selection tool can adjust handles like so. Like that.

But if I need to click on a point on my Selection tool, hold down Option, I can basically break or separate two linked handles. And by default, for the record, all of the handles are linked. So I can use this to create a more curving, a more rounded shape.

Like so. I'm going to adjust that a little bit. And now when this plays, I get more of a bounce behavior.

Not quite so abruptly linear back and forward. Now it's actually easing more along the curve. That's what the curves do.

They're easing it. Much nicer, much better. I like this a lot.

Okay. So I decide I want to do this to Quests. And this is where the problem arises.

So first, all I've done is edit and add keyframes. I can't copy and paste those to any of the layers because they'll end up in the same place. So I have to rebuild this for each individual property.

So again, I'll go to Quests. You'd reveal the keyframes. Separate the dimensions.

Like that. And when I click on X position again, I am going to delete the Y position keyframes. They're not necessary for this, by the way.

So when I press U now, I only see X position. I only see that one property. That's it.

Okay. The selected property or properties keys are what actually show up when you are in the Graph Editor. So like that.

Okay, like that. That's what I have. Now, if you want to make sure a property always displays, I kind of want to use this Zelda as a reference.

I'm going to turn on the little include this property in the Graph Editor set for the Zelda line. Now I'll see this at all times. So when I click on the Quests position, I can now see them both and helps me figure out where everything should be.

So again, I'm holding down Command or Control on Windows to turn my cursor into the add anchor point tool. I'm going to make them line up and then I can adjust them as I did before. Center baseline, center baseline, up slightly above the second handle, up slightly above the second grid line, up just to it.

So I'm trying to line this up. And then Option or Alt, clicking on the points to convert them into smooth points. And then back to my selection tool to adjust them.

That is the process that I have to do. Okay. Unfortunately, there is no built-in way to copy and paste easing from one property to another.

That would actually be very helpful, but it's not built in. There are a couple of add-ons that can do it to an extent. But in general, each easing curve is an individual unique experience.

That's a little too high. I'm trying to make that line up better. Click on it.

And I can adjust the handles like so, like so. And again, the more of these I can add, the easier it is for me to line them up. But effectively, I can do that to every one, make them show up and use that as my reference.

But I would still have to do this layer by layer. And that is how you create bounce in or for that matter, any easing on the value graph. You add extra keyframes and adjust the shape of their value lines.

If you're doing another property, there's no separate dimensions for, for example, rotation. There's no separate dimensions for scale. It's really only position that needs that extra step in order to edit it here.

Any other property you would be able to do this to without any other changes. And that is custom easy. So again, I can display any of the existing graph properties whenever I want by simply enabling this little graph switch right to the left of the properties right next to the stopwatch that enables animation.

So have fun making custom graphs.