Hello and welcome I am your
host Elias Sarantopoulos! This time around in After Effects
I will be answering the question how to use the Speed and Value graph to smooth
your animations over time inside the Graph Editor. Alright so let us go ahead and
start this off inside After Effects, I’ve got a couple of layers that I will animate in
order to show you how to work with the Speed graph and the Value graph inside the Graph editor. Now
a quick tip before we animate those two layers is that the Anchor point is not center on either
layer. Now the anchor point refers to the point in which all transformations are manipulated from
so it's a good practice to set the anchor points before you begin animating your composition so in
this case, I am going to go up to the Layer menu and inside the Transform I am going to go ahead
and use the Center Anchor Point in Layer Content or I can also use the keyboard shortcut which I
am going to do for this one. For the Circle Dot I am going to run the keyboard shortcut and then
what I am going to do is, I am going to select the Inner Circle and inside the Align panel here I am
going to center this Horizontally and Vertically. I will do the same for the Circle Dot I am just
going to move this out of the way a bit let's say around here. Great, now I am just going to lock
this inner circle and focus on the Circle Dot to show you how to change the spacing speed between
frames eventually using the Speed graph but first let's go ahead and set the animation motion path.
So, for that I am going to go ahead and animate the Position property so for that I am going
to press the letter (p) p on the keyboard and (p) stands for the Position. I also want to make
sure that the Current Time Indicator is right at the beginning of the timeline and then I am going
to create the first keyframe by clicking on this stopwatch right here and here's the first
keyframe. Great now I am going to scrub the Current Time Indicator to 15 seconds and then I am
going to click and drag and move this Circle Dot, let's see, around here and here is the motion
path. I am going to continue this to 30 seconds, move this over here and I am doing
this as I mentioned before because it's a great example for us to see how the
timing will change through this motion path. Alright, so let's go ahead and press the Spacebar
to preview this animation (RAM preview) and as you can see it's just a very boring animation just
a Circle Dot going around. So how can we spice things up? So what I am going to do is actually
I am going to click on this vertex right here and once I do you can see those two dots
so if I click and drag you can see those two (2) directional handles, now these two handles
move together at the same time but what I want to do here is actually I want to split those handles
so I can have control on both sides independently and make this a discontinuous Bezier path, of
course through this vertex. And the way we're going to do this, we're going to hold down the ALT
key and when I click and drag this control handle, I am going to position this right here, release
both, ALT key and the mouse here and then just click and drag this directional handle and put
it right there. I am going to do the same one for this vertex here, I am going to hold down the ALT
key or the OPTION key, going to click and drag, release everything, move this control
handle here, click on this vertex, hold down the ALT or the OPTION key, move this
down here, click on this directional handle and over there and as for this since this
is an open path I can just click on this directional handle, click on the other end
and just move this one here. Alright, great! Now let's give a little space here and perhaps
let me move this a little bit out of the way, perhaps a little bit here and
just move this out of the way too, like so. So, let's go ahead and press the
Spacebar (RAM preview) and as you can see, we have a more meaningful motion path to work with
and changed the space and speed of the frames. Now let's talk about this motion path and what
it means. The spacing between those dots in the motion path indicates speed and each dot is the
Position of an anchor point at each frame. Right now, let's go ahead and press the Spacebar to
preview this animation. This animation is a Linear animation which by the way is indicated
by these diamond icons. Alright that means, the animation begins instantly at the first keyframe
and continues to the next one at a constant speed and velocity and that's why we have an equal
amount of distance traveled between every single one of these frames. So, let me show you what I
mean, this is the distance that I am referring to between each of these frames and that's why we
have a Linear animation. Now in the graph editor once we click on the Position and then click on
the Graph editor and by the way if you click on this graph type, here we are working inside
the Speed graph. So inside the Graph editor the segments connecting those points here with
Linear Interpolation appears as straight lines. This is a straight line; this is a straight line
and so on. Now these points here these basically are keyframes so when I select one and I switch to
the Layer Bar mode we can see within the timeline; they are the same point in time as the ones inside
the Speed graph. Alright, just keep that in mind. now when we hover over each of these keyframes
here we can see the Position property that is measured by pixels per second overtime and the
Speed graph shows how it calculates between those keyframes. So, let's go ahead and take advantage
of the Speed graph and fine tune those keyframes to make changes over time so it will take
longer for this Circle Dot to travel over the beginning and end of each segment of the motion
path, instead of traveling at a constant speed and velocity. So, how do we do that how would we
change time? Well first of all we need to select all these keyframes, and again I am inside
the Graph editor, inside the Speed graph, I am going to select all the keyframes by using the
keyboard shortcut and then I am going to change the keyframe type from Linear Interpolation to
Easy Ease. There are several ways you can do this, we can right click here for example and under
the Keyframe Assistant I can use the Easy Ease, I can also use the F9 as a keyboard shortcut or I
can just go at the very bottom of the Graph editor and just use Easy Ease, alright, here it is! So,
the Speed graph dramatically changed comparing it to the Linear Interpolation, now instead of
straight lines we have curved paths. Also, looking at the motion path, alright, there
is less space between frames in the beginning and end of the animation and there is more
spacing in between, see that? So, what can we do to actually improve that even more and change the
timing using the speed graph? What we're going to do is actually, we're going to select for example
this keyframe and drag this influence handle coming out of each of these keyframes, this way
when we edit the curve the gap between frames will shrink, I am talking about the beginning or
end of this segment here and it will be widened in between. OK, so let's go ahead and for example
pull this influence handle out and as you can see, I am holding also the SHIFT key on my keyboard and
what happens is, it influences the amount of time the animation it takes to start off. You
see, it starts at zero (0), it picks up a three thousand something and then it dies down
to zero (0). Let me bring this up even more, do the same one here, let's see. So now it
picks up to 5000, so let's see how this works, you see, it's a much better animation here. Let's
look at the motion path, you see the distance here it's much less in the beginning and end of this
motion path here at each segment but there is much more space in between here. Great, let's do
this one here, I am going to bring this handle in, this handle out here and I am trying to kind
of match this, right? Alright, so let's play this again… there you go, you see it starts
up, it speeds up and dies down again. Great, that is one thing, now what else can
we do? There's another thing we can do, we can actually change the speed, the timing,
right now we changed the spacing, how about making the animation even faster, how can we do
this? Well, what we can do is actually, we can click and drag this keyframe up and do that which
is a nice way to do it, but I highly recommend you use actually a numeric value, so you control the
animation precisely. So, I am going to Undo this CTRL + Z/CMD + Z) and then I am going to double
click on this keyframe and this is going to bring the Keyframe Velocity window. So, in this case
I am going to focus on the Outgoing Velocity because the motion is coming out of that keyframe.
So, for the Speed, let me cancel this out, right now the Speed says 5000 something so double
click here again, I am going to change this to let's say 5000 and then for the Influence
I am going to set this to 70% and click OK, here it is! As for this one, double click and
now, I am going to work on the Incoming Velocity. The Incoming Velocity is because we
are moving into this keyframe’s motion, I am going to actually leave the speed to zero
(0) pixels per second so the motion eases into it, but I would definitely change the Influence, I
am going to set this to 70% also and click OK, there you go! So, we know this motion when it
comes to this keyframe this is going to go faster, do you see the difference? There
we go! Let's double click on this, again inside the Keyframe Velocity
the speed, I will set this to 5000, Influence to 70%, click OK. And actually, for this
one since I kind of know, this at the end of the animation as well, I can bring this in to let's
say 70%, OK. So, let's go ahead and preview this, this is slower here well it depends of course
what you want to do and what kind of animation you want to accomplish, so basically this is
how we change the speed and timing of keyframes using the Speed graph inside the Graph editor. Alright, so let's go ahead and focus on the Inner
Circle layer and actually create two (2) separate property values, one for the Position and
the other one for the Scale. So, I am going to make sure the Current Time Indicator is at the
beginning of the timeline and since I am going to animate the Position property I am going to go
ahead and press the letter (p) on the keyboard. So, I am going to go ahead and click on
the Stopwatch to create my first keyframe and I am going to scrub the Current Time Indicator
to let's say 15 seconds and then go ahead and add another keyframe. Then I am going to scrub the
Current Time Indicator back to the first keyframe, click on the first keyframe and then click and
drag, and I am holding the SHIFT key as I do and just place this around here. Actually, I am
going to set this specifically on the Position Y to 600 pixels just because I want to have round
numbers and for no other reason. OK, great! So let's make sure that we're on the Position and
click on the Graph editor and just to remind you that we are still, if on the Graph Type,
we are still on the Speed graph, in this case we're going to use the Value graph and something
you need to know about the Value graph is that we adjust property values with the value graph
whether be Scale, Rotation, or Position. And something else to remember, some Properties
consist of more than one value or dimension in this case the Position property consists
of two (2) values. The position of value graph includes two colored lines, in this case the
red line represents the Position X and the green line represents the Position Y. Now right
now as you can see, we have a Linear animation indicated by the straight segments so let's go
ahead and convert those keyframes to Easy Ease. So, first of all I am going to marquee select
all those keyframes and then I am just going to use the Easy Ease, there we go! OK, so what just
happened now is that we have an S-shaped curve and here we have a straight line and that's because
we didn't animate on the Position X. Now let us go ahead and read this for a second, in the beginning
we are at the 600 pixels and when I scrub this, we are at the 360 pixels. Now another thing to
note is that the fact that there are no handles coming out from the Position Y either on
the first keyframe or the second keyframe. In order for us to manipulate the curve
as we did before with the Speed graph, again just to remind you some properties consist
of more than one value and the Position property in this case includes values for both the X and
the U coordinates, therefore we are not able to edit the S-curve with the Position property that
has both values locked to each other. So, the trick here is to separate those two, so I am going
to click on the Position property and then use the Separate Dimensions and now we have the X position
property and the Y position property separately, and the color reflects that inside the Value
graph, alright? Now again, in our example there is no animation on the X-axis so what I
am going to do is to make my life easier here, I am going to remove the keyframes on the X
position and then focus on the Y position. Now because we separated the dimensions the
S-shaped curve got a little bit messed up, so I am going to marquee select those two (2)
and then again use the Easy Ease, like so. Great, lets take that, click on this
keyframe, and bring this out and just make sure you hold down the SHIFT key as
you do and I am going to bring this in, again I am moving the directional handles. If
I play this, it starts slow picks up and then dies down, it's just it's a very short distance to
cover. Alright, so, what else are we going to do, just make sure you're on the Inner Circle, I
am going to press the letter S on the keyboard because I am also going to animate the Scale
property so I am going to press the letter (s) on the keyboard, I am going to switch back
to the Layer Bar mode, I am going to make sure that I am in the very first keyframe inside
the timeline and I am going to click on the stopwatch to create the first keyframe, great!
I am also going to press the letter (u) on the keyboard to see all visible keyframes, I am going
to scrub the Current Time Indicator to 15 seconds, add another keyframe, perhaps I am going to go
down to 10%, let me scrub this to like 35 seconds, bring this to 70 percent, at the very end I
am going to set the Scale to 100%, alright? just make sure you are on the Scale, I am
going to bring up the Graph editor, as you can see we have again a Linear animation. So, I
am going to marquee select all of these keyframes and I am going to use again the Easy Ease, like
so. Alright, so let's play this (RAM preview), already things are looking better but I am not
happy on this point right here. So, as I mentioned before with the Value graph, we can actually
change the properties, in this case I am going to change the Scale property. So, I am going to click
on that, right now we're on the 70% and I am going to bring this to 100%. Alright! Nothing special is
going to happen here but what I am going to do is, I am going to create, I am going to do one more
tick which is, I am going to overshoot this. Overshoot refers to going beyond the resting value
of 100 scale in this case right now we're on the 100% Scale so we're going to overshoot this beyond
the resting value of 100 and then return back to the resting value. So, what I am going to do
is inside the Value graph I will push this one off the space and beyond this horizontal
line and I am going to overshoot this. Let's play (RAM preview) this, there we go, see
that great so we have a mix and match here so it's not a boring animation. Let’s also
make the Circle Dot visible on the layer here and let's look at this. I think it looks pretty
good, we can actually overshoot this even more, there we go, split that again press the Spacebar
on your keyboard for RAM preview. Great, alright, so to sum it up the Speed graph measures Speed
or Velocity over time whereas the Value graph measures the value over time! Thank you everyone
for visiting my channel and watching the inspired lectures and tutorials, do not forget to subscribe
and share the knowledge! Elias Sarantopoulos.
