Hello and welcome
to New Frame Plus. It’s time we got back to
those principles of animation. So far we have covered Timing,
Squash & Stretch, Anticipation and
Slow In & Slow Out. Today let’s discuss Follow
Through & Overlapping Action. Back in the early days
of Disney animation, as the young animators at
the studio were growing their understanding of the craft,
they encountered a problem: they just couldn’t make a
character coming to a stop look right. Every time an action resolved
or the character held a pose, it just kept feeling
stiff and unnatural. And eventually they realized the problem
was that every part of the character was moving and then
stopping all at once. So they developed some
techniques for breaking that motion up. If the character had appendages
like long ears or a loose coat, they would have
those loose bits flap or continue moving after
the body had come to a halt. They would have different
parts of the body do the same, like maybe having the arms
reach their resting position a few frames after the torso. They would make the looser, fleshier bits
of a character (like, say, their jowls) drag behind the motion of the
more skeletal part (the head). They started paying a lot more
attention to HOW each action resolved, and all of the opportunities
there were for adding character to the follow through
completion of that move. And when combined with the
principle of Slow In & Slow Out - with each character
easing into their final pose but with all that nice flapping
follow-through motion on the loose bits - they found their characters really
started developing a sense of weight. They would eventually bundle all
of these techniques into a principle they called Follow Through
and Overlapping Action. As you can tell,
this is another one of those principles that’s all about replicating
the physics of motion, as well as the influence of
forces like gravity or wind. Overlapping Action is fundamentally
about breaking up movement so not everything is happening
at exactly the same time. Instead, certain parts will lead
the motion, and others will follow. And one of the most
straightforward applications of that is the motion on a
character’s loose extremities. For a simple example: the springy
antenna on your Rocket League car. On its own,
this tennis ball will never move. It is just a static
object at rest. But when the CAR moves, because
the base of the antenna is attached to it, the car’s motion
affects the tennis ball. When I accelerate from a stop,
the car starts moving forward, but the tennis ball doesn’t
move forward at the same rate. After all, nothing is propelling
the tennis ball forward; it’s just being pulled
along for the ride. So, as the car picks up speed,
the antenna bends and the tennis ball drags behind as far
as the antenna’s springy-ness will allow. Then,
when I hit the brakes to stop the car, the ball’s forward
momentum continues forward, bobbing past the car until the
antenna eventually springs back. After which, the ball will
continue to wobble back and forth until it eventually
comes to rest again. The way this antenna’s motion
follows the car but with offset timing? That is Overlapping Action. For a more complex example, look at all the overlapping action
happening on Aloy as she runs. Her long hair flaps behind her, not only following the vertical motion
of her head during this bouncing jog, but also accentuating the subtle
side-to-side motion of each step. There’s Overlapping Action
on her clothing as well. Not ALL of it, of course; lots of pieces like her boots
and pants and arm guards are too form-fitting and solid to
noticeably move independently of her body, but the loose leather cloth
around her waist flaps constantly, partly jostled by the
movement of her legs, but also overlapping the motion on
her waist where that cloth is attached. The equipment she’s carrying is
overlapping as well, and in different ways! The rope on her left
side dangles loosely, reacting to movement very
similarly to the leather of her clothes, with waves of motion rippling down the
length of the coil like a flag in the wind. The quiver of arrows on her
right moves differently, though! Not only is it attached to her belt
in a different way than the rope, but it’s also a more solid piece,
bouncing against her hip. The bow attached to her
back is a solid piece as well, and it appears to be more
securely attached than the quiver, as it doesn’t appear to bounce or
overlap the movement of her torso at all. However, the decorative tail attached
to it DOES overlap the motion of the bow, which is itself inheriting
motion from her body. As you can see,
the amount of overlap and follow-through applied
to any given part of a character helps to convey that
part’s weight and material. Like, the stiff,
springy car antenna here, has completely different
physical properties than Aloy’s braided and flowing hair,
which ALSO has different physical properties
than her heavier leather clothing, and you can feel the difference
between all those materials just by looking at the ways each
of them are affected by the motion of the characters or the
objects they are attached to. AND, for both the toy car
and the machine hunter, all of this overlapping motion not
only lends a greater sense of weight and realistic physicality
to their movement, but it also just adds some
nice texture and visual interest! But, of course,
Overlapping Action isn’t just about loosely-attached
bits like clothing or hair. It can also be
applied to different parts of the body. Look at Axel’s idle loop here. There’s a nice
rhythmic bounce to his fighting stance, and you can probably already see
the overlap happening on his hair, his jacket, the sleeves on his... spare
shirt, I guess? And even his pant legs. But there’s also some very nice overlap
happening on his shoulders and arms! The bounce on the shoulders is about a
frame or two behind the motion on his torso, and the rise and fall
on his hands is maybe a frame behind that. It’s like his center
of gravity’s vertical bouncing motion is rippling up through each
successive joint in his limbs. You can see this
offset bounce even more in Cherry’s idle, with her arms rising and falling
just slightly out of sync with her core, closer in timing to the
guitar strapped to her back. The offset timing of the
limbs is not only helping to lend these characters a
sense of believable physicality, but it also just helps to make their
idle loops more interesting to look at. And this sort of offset body
motion is great for demonstrating which parts of the
body are driving an action, or showing where the
action’s power originates. Take Cherry’s
jumping guitar slam. The guitar may
be the thing doing the damage here, but the power of the
swing comes from her body. Her head and shoulder lead the
swing and the arms and the guitar follow. She’s using
the twist up her spine and gravity itself to whip the guitar down
toward it’s target with even greater force than she could
ever hope to do with arm strength alone. You can also see some amazing
offset in her defensive Special. There are very few frames of
animation between this pose and this one, but you’ve still got
some overlap in here. Look how,
between this frame and this one, her screen right
foot slides to nearly its final position, the guitar drops and
her pick hand starts to come down too, but the spacing on her head
doesn’t cover nearly as much distance yet. It gives the impression that the motion is
starting in the hips and reaching the head last, which helps
to lend the next frame this whipping SNAP and so much more impact. Just look at that pose,
man. That is SO good. This sort of intentionally-applied
Overlap is vital to making many actions feel not just more interesting,
but more natural, because these are the
mechanics of how our bodies naturally move. But, of course, Overlapping Action is
hardly limited to character movement! You can see this principle at
play in environment animation too, like the way vegetation and
banners and such react to external forces like wind and gravity. Overlapping Action can even occur
between two or more interacting characters. Like, say,
if your character is riding a mount! Look at how the rise and fall of the
horse’s canter visibly affects Arthur here. As the saddle
bounces beneath him, his spine bends and
straightens ever so slightly, and each impact causes a rhythmic shake
from his shoulders down through his arms. And, of course, there’s a bit of overlap
happening to his jacket and the bag as well. Or Daxter riding on
Jak’s shoulder is another great example! Daxter’s bouncing motion is driven by the
motion of the shoulder he’s clinging to; pushed up, pulled down, pushed up,
pulled down, just a few frames
offset from the rhythm of Jak’s jogging. And not only that,
but Daxter’s tail and ears are then overlapping
the motion of Daxter’s body movement. The vertical motion of Jak’s run
is rippling up from one character to another character
to that second character’s extremities. And it looks great. And what’s more,
as with most animation principles, Overlapping Action
can be exaggerated for stylistic effect. Check out the overlap on
Crash’s arms when he jumps. The head and the body lead,
the shoulders follow and the motion just ripples through
each joint in the arms down to the fingers. Even his torso has some overlapping action
when he’s just standing there idling! You see how his upper body’s motion is
slightly offset from the motion on his hips, lending the torso a nice squash & stretchy
feel even when he’s just standing there? Plus there’s overlap happening on
his ears. And his hair. And his nose. And even his eyebrows.
Highly exaggerated, but very appealing! Or consider the
exaggeration on this Zenyatta attack. Look at the way
his hand whips forward for this strike, with such extreme overlap on the successive
joints in his arm, hands and fingers that the animator is even bending and
deforming the metal of Zenyatta’s arm wildly on certain
frames to achieve that whip like snap. Now realistically, that is probably not
how metal robot arms should bend but, it looks pretty amazing in motion,
doesn’t it? OK, so if that’s Overlap,
then what’s Follow Through? I find that the easiest way to
think of Follow Through is as the opposite of Anticipation. Where Anticipation describes how an
action begins, Follow Through
basically describes how an action resolves. So for this Charge Blade attack,
you’ve got your anticipation wind-up, and then the actual sword swing, but then after the sword connects with
the target, you get the follow through where the momentum of the swing
carries the sword well past it’s target, all the way around
behind the player character until they’re able to bring it to a
stop and settle into this pose here. Follow Through doesn’t
have to be about recovering from a big moves like an attack,
though. It can also be a subtle thing,
like how a character comes to a stop. I love the settle that happens when your player character
in Spiritfarer stops moving forward. You don’t see this
in a lot of 2D games. A lot of the time, 2D sprite characters will
simply pop directly from their run cycle to their idle
when the player stops moving them. No Follow Through at all. And it's fine that they do,
because the snappy switch between states is part of what makes those
characters feel so responsive to control. Sometimes you’ll see
a character with some in-between frames to smooth
that transition back to idle a little bit. But here, Stella’s stop
has an actual proper Follow Through. She leans back
and plants one foot, halting her forward momentum before
settling into her idle stance. And, there’s some
Overlap happening in this stop as well with the way different parts of her body
are coming to a stop at offset times. The foot plants first as she leans back
to bring her center of gravity to a halt, then she straightens up and
her arms and her hands drift into place last. There’s even a bit
of overlap on the brim of that big hat! I love this animation. It sells the physicality of the stop AND
it still feels responsive somehow, it’s great. Stella is just a great showcase
of this principle in general. Now, I should probably mention
that - if you study or work in animation - you are going to hear the
applications of this principle described using a wide
variety of terminology. Drag, settles, physics, flapping, bounce, jiggle, wave motion, primary and secondary motion, secondary animation, successive breaking of joints, lead and follow, and many more Frustratingly, even The Illusion of Life - the book in which
this principle was originally introduced - doesn’t do a great job at clearly
defining what each of these terms mean in relation to each other. And as a result, a lot of animators can’t
always seem to agree on what exactly each of these
terms is specifically meant to describe, or we simply
use them interchangeably. Which is, I guess, what happens when
you try to build a principle of animation around a loose handful of different tricks
that some guys came up with 100 years ago to make a character
stopping look right. But no matter
what terminology you use to describe it, this is a vital principle
for animation, and one with
many useful applications in games. For one thing, Follow Through is a CRUCIAL
tool in the game animator’s tool belt for selling physicality and the
power where Anticipation isn’t an option. As I said in my Anticipation video, when it comes to making a player
character feel good to control, responsiveness is vital. The faster we see an action happen after
our button press, the more responsive
the game feels. And achieving that
result often means that we have to keep the wind-up anticipations
for each action short. Sometimes so short
that the anticipation's barely even there. That kind of puts us animators in a bind,
though, because how are we supposed to make
these actions have a proper sense of weight and power without the anticipation wind-up
we’d normally use to communicate those things? One handy trick is to exaggerate
the Follow Through instead, using the finish and recovery time
of each action to sell it’s power rather than the
preparatory wind-up. Link may not have much time to
raise that sword before swinging it, but the long follow through and recovery
time after the swing help to pick up the slack,
suggesting the momentum and power that the anticipation
didn’t have time to convey. But on top of that,
Follow Through can also be great for giving the player
visual feedback. Sometimes video game character actions
just happen too quickly to easily see, and a strong,
exaggerated Follow Through pose can help the player to visually register
and mentally back-fill what just happened. And the physics of
Overlapping Action can be an amazing tool for making our game
characters’ motion flow more naturally. A lot of today’s games
make use of real-time physics simulation to handle dangling
objects like hair or cloth, and one of the biggest benefits
to simulating those elements rather than hand animating them is
that doing so allows those physics objects to help hide the seams between
our character’s countless animations. For an easy-to-see example, watch
Ana’s coat during this Overwatch emote. She finishes the emote animation
and returns to her idle loop right around… here. At this point,
the emote animation is over. But, because the physics of her
coattails is being simulated independently, the cloth continues to swing, still inheriting and following through on
the motion of that emote that came before. During the course of game-play,
3D game characters are often going to be blending between numerous different
animations within the span of seconds. Running, turning, stopping,
starting, jump, attack, running again. Any number of different actions
might be strung together in any order. So having some simple physics
simulation on cloth and hair and such can help to make that unpredictable
string of actions still have persistent continuity
of Overlapping motion, making it all feel more “right”. You’d be amazed at how just a little
physics stimulation on a cape or a coat can smooth over those little
hitches and unnatural weight shifts. But even when the
Overlapping Action is being hand-animated, it can still be a fantastic tool for adding
texture to your game characters movement. From the way
Mario’s cap bounces on his head as he runs. To the loose, rattling clutter
on Junkrat’s homemade launcher. To Quill’s adorably
floppy ears and tail. Whether you are trying to
better convey character physicality or add clarity to rapid motions
or even just make it look right when your character
comes to a stop, a smart application of Follow Through &
Overlapping Action can make all the difference. Because, again,
it’s all about replicating (and sometimes
exaggerating) the physics of motion. But I think that’ll do it! I’ve covered several other principles
of animation on this channel already if you’ve enjoyed this
and want to learn about more of them. And be sure to subscribe if you want
to hear about the rest in future episodes. As always, a huge thank you to my
patrons for supporting what I do, and thanks to you
as well for watching. I will see you next time. [music]
Overwatch is also really good for this too. Every hero has something going on with their clothing and character models. Many of their weapons also.
Sometimes I just launch up the hero gallery and rotate the characters quickly in the skins menu just to stare at how all the dangley bits react lol.
Edit: I didn't realise Overwatch is mentioned in the video, whoops
Is this really an opinion piece?