Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This section, is about timing and spacing, and it's very easy to get these mixed up, but they're quite different, and I had them confused for a very long time. Think of timing as, in the case of this quick animation, very simple of these various balls moving from left to right. I'm just going to hide most of them, except for the one on the top. Let's look at this guide, the even spacing of railroad tracks. The most boring of the lot. So, think of the timing as the extremes, the key frames one and 17.
The most outermost. They determine when the ball begins to move, and they determine when it arrives. It leaves on frame one, it arrives on frame 17. If I wanted to change the timing, I would change the number 17, to number 25, and have it arrive on frame 25. So that's the timing. And, you can see a different timing chart beneath, where I've used a slow out and a slow in, using traditional terms. With frame nine is exactly halfway between the two. Slightly more interesting look, and again, the timing is the same.
The spacing now, is different. The spacing of the twins, that are determined by this timing chart, are completely different. So, worry apart from obviously the midpoint frame nine, which is the same on both. If you're working in a 3D program or some other program, After Effects, each program has its own hypergraph editor or timeline editor, or way to slow in or ease in, ease out. It behooves you to learn which is the one that works for you, and to learn the difference between timing and spacing, and to try in general to avoid so-called, railroad track spacing as we see at the very top.
So, I'm just going to show you, one of the problems that I have with a lot digital twinning, is that it tends toward this, even when you apply ease ins and ease outs. It's actually not easy, many times, I find, to get the spacing that we were able to get when you were doing this by hand. So, let me show you just some other examples. I'm going to compare the entire set here. At the bottom, you can see an extreme slow and very snappy, where it almost pops in there. On this one here, you can see a slow out on thirds, meaning the first in between is a 1 3rd favor of frame one.
And let's just look at that by itself. It really just takes a while to get going. This makes it feel like it has more mass. It's taking more energy to get that thing to start moving. Much more so than let's say, hm. The one below slow out on halves. And you can see the slight differences. Not slight, sometimes quite big, that slow out on thirds. This one in here, is looking quite different from the others. So again, these are traditional timing charts. These would enable the animator to control the exact positioning, of the in-between frames. Let me show you some digital equivalents.
I just made these in Flash, and, I'll just look at the top four first. These are using the classic twin, and I've got the twin settings here, of easing of 100, 90, 80, and 50. And you can see, they more or less do the same thing. I'm going to keyframe these. So that I can show you what they look like, with all the frames in outline mode. It's pretty smooth, almost too smooth. They're still pretty evenly spaced for my taste. So, what if you want a more traditional slow in, slow out. Can you get that with a hypergraph? Well, I played with this for a while, I think I got pretty close.
Let me key frame the whole thing, so again, we can see it in outline mode, and that's not too far away from what we saw here, with the slow out, slow in on third, it's remarkably similar. Let me switch off the multiple frames option, and as you can see, that's feeling much zippier than the, than the classic twin, that's for sure. So, we have, the possibility of making them manually, I just manually set these positions. Well obviously, you're manually setting key frames, very tedious, and I don't think anybody really wants to do that.
So, I suggest that you don't take the spacing options for granted, you know, a lot of us, I think, have a habit of using the default ease in, ease out settings. And it tends towards the sameness, it tends to look the same. So, let's show you some examples of how you can use spacing to convey different feelings of mass. So, I'm going to show a cannon ball falling, like a bouncing ball. So, this was the first one. And again, if we show multiple frames. This is the spacing. The timing is about 12 frames, half a second from top to bottom.
So, what I did, was I took this, and I changed both timing, and, to a smaller extent the spacing, I pulled out this in-between frame here. And, you get a much greater feeling of mass from the ball, because again, we've gotten rid of that frame. So, as you can see, the spacing and the timing have an enormous effect on the physical properties of the object. Here's another good example. It's a man, hitting an anvil. And, this was an animation I did based on an old cartoon, from the 1940's. It was fortunately in the public domain. And, as you can see, there's a huge slow out on the backswing of this.
So, it's about, yes, 26 frames, and it's at a 24 frame per second, so it's a full second of anticipation on the hammer, and it takes this long to recover back, into the zero post. And so simply by changing on this version, all I did was I change the frames from this point, to the down swing, and then we slam into the impact, and let's see what's that looks like, much harder. It's much deeper animation. So let's look at both of these, side by side.
I'll just, open out the stage. Grab this one. So this is the hard hit on the left, and this is the, lesser on the right. You really feel more physical force. Just by a change of timing and a change of spacing. And so, it's a powerful set of tools, try not to confuse them, and don't be afraid to experiment with whatever ease in and ease out settings, you have in your software.
Get unlimited access to all courses for just $25/month.Become a member
107 Video lessons · 31734 Viewers
90 Video lessons · 21982 Viewers
78 Video lessons · 8075 Viewers
83 Video lessons · 7764 Viewers