SCRIPT1

WHY YOUR ANIMATIONS LOOK CHOPPY AND STIFF
How to make your animations look smooth

Wow it's been a while since my last tutorial.

For those of you who don't know, I'm Zedrin, and I've been animating since 2011, 100% self taught. I've done a ton of tutorials in Flash, and I've recently gotten aclimated to Toon Boom so you probably will start seeing more tutorials about that from me. That said, this one isn't toon boom specific. It'll apply to ANYTHING you use to animate.

And this'll apply for hand drawn, fully rigged, frame by frame, tweened, and everything in between.

I often get comments on my animation about the smoothness. It's no secret that more frames = smoother animation.

Or you'd think.

Getting smooth animation isn't just a matter of animating every single frame or using constant tweens however. There's this notion that higher framerates = smoother animation and this is NOT true. There are many other factors that carry a lot more weight with the perceived smoothness of your animation.


*0: SCRAPPY*
Before even getting to the motion, one HUGE MISTAKE I often see is people rushing straight to finalized drawings before planning out their animation first.

Keep your animation scrappy and sketchy before getting to that point. All animations for this demo will be done as such til it actually comes time to start finalizing the animation.


*1: KEYFRAMES ARE KEY*
The biggest and most prevalent issue I see overall is people not prioritizing what's important when keyframing. They're trying to do everything at once or aren't putting value into their frames.

Keyframing is the first step of any and all animation. When keyframing, especially with hand drawn animation, it is imperative that every frame counts. No half-assed frames. Much like when doing lineart, where each line needs to describe something about your figure, key frames need to start as every essential frame your animation has.

Try making your animation with absolutely as few keyframes possible. It should still be legible, but think about those old Captain Underpants books with the 2-frame flip-o-rama animation and how clear they were.

Those are literally 2 keyframes.

Clarity and smoothness absolutely require clear points to work between.


*2: Consistency*

I need to mention a bit about consistency before going to the next point.

Consistency plays into EVERY step of the process and is doubly important for hand drawn stuff, as you're not reusing parts as often, so you need to make sure you're drawing your arm widths the same each time, etc.

Make sure the keyframes you've done keep the character model (or objects) consistent. It doesn't need to be 100% perfect. Onion skins are insanely helpful for this. If working more traditionally, overlaying your pics and inspecting them as you flip back and forth is a classical way to do so. And scrub through your animation regularly as you work to make sure a movement doesn't seem offset.



*3: Anticipation, Overshoot, and recoil: The first in betweens*

So you have your core keyframes done, what's next? Inbetweening, right? WRONG.

Many novice animators go straight to the tweening process when dealing with rigs at this part, or they'll start drawing the breakdowns and in betweens. Before doing that we want to see if there's actually any overshoot, recoil, anticipation, anything having to do with weight. Even with easing, going straight from pose to pose would just look dull and unnatural.

Especially with quick motions, organic objects going from point A to point B will have an impulse when doing so. This may mean there's a slight windup, and almost always will mean it shoots PAST its original goal before settling at its intended destination.

For a single motion between two keyframes this usually will just mean up to two additional frames, and these are very similar to their surrounding ones. For anticipation, an item may move back a little, or like for an arm it might bend back a little as it starts to move forward, as if the hand and wrist is dragging behind.

Note that not everything will have anticipation and overshoot. Cyclical movements like walkcycles often won't, at least not for the legs--or if they do, it's super subtle.

Also, sometimes, for especially springy objects, one motion might have multiple instances of overshoot to it that decreases over time. Think like how a spring doorstop vibrates when flicked.

A NOTE ON DRAG: 
Elements that are more suspended / extended away from the center of mass, or are lighter and lack support will also have drag, meaning their motions will have a slight delay compared to their parent parts. While for things like hands it may just mean a slight flick back as the arm moves forward, I seriously recommend worrying about drag later when it comes to items like cloth and hair, or anything that is significantly lighter than the parent item that's moving.


*4: Inbetweening, easing and timing

NOW we get to do the transitions from point A to point B. The process varies a bit for rigs and frame by frame, so I'll tackle both. This is where we start finalizingt he animation.

First things first, time out your aniamtion if you haven't yet. If you play it at this point, it should make logical sense, and the only things missing may be things like secondary motions, smearing, and a few drag components. Honestly, at this point it should start to look fairly smooth. Our goal from here should be to preserve or enhance that smoothness.

At this point you'll start finalizing things. For rigs, you'll start arranging your items in the poses on layers over your original sketch. For hand drawn, you'll start drawing at least the most essential parts of the design. Additionally for hand drawn, for some parts with anticipation and overshoot, you can just duplicate and adjust small portions of the closest keyframe.

4.1 rigged (tweens)
Now for rigs, this is where, if tweening, you'd apply your tweens. If you play it back, it'll be stiff, mechanical motions from place to place.

GOD it looks hideous. Don't leave it like this.

So let's talk about easing patterns. There are 3 commmonly used eases: ease in, ease out, and ease both. Some programs have quick tools to apply these, and you want to know what to use when.

Ease in is whenever something is starting to accelerate, and needs to move quickly through its final point. This is useful when throwing a punch or when an item is starting to fall. It can be combined with ease out to make an ease both that you have a little more control over, which is useful if you need a part transition such as for a headturn. Transitions often work best when they happen at the highest speed during a motion.

Ease out is when something is coming to a rest. Its motion will start off fast and slow to a stop. This is useful when something is going to the apex of a jump, or when something needs to go to a resting state.

Ease both is what you'll most commonly use for MOST organic animation.

4.2 Rigged (not tweened)

That all said, you do NOT need to use tweens to animate smoothly. Tweening is an attempt to animate on 1's without having keyframes on 1's. But, neither are a prerequesite to get a smooth animation.

You can still manually add keyframes for your in betweens, and the process is very similar to hand drawn animation, which I'll cover in the next segment. The only difference is instead of redrawing the active elements, you merely reposition the components where appropriate.


4.3 handdrawn

With handdrawn animation, many of the same properties apply, but you can approach them from one of two directions: either space, or time. This is the fun part, drawing your in betweens.

The most common way to do this is to divide between your keyframes. You draw a 50% interpolation between point A and point B. Then you take that new frame you did and do the same with the surrounding in betweens, so on until it's even.

This'll give you uneased animation however which probably isn't what you want. There's two ways you can apply easing.

First is timing based. You draw your in betweens as normal, and adjust when they occur instead of having them appear at constant times. For instance, when easing out, the 50% interpolation may occur early on in the animation, so you'd move that frame to play earlier. Then do another interpolation between that frame and the next one, time that out appropriately, repeat until you've filled enough frames to be smooth. (And you do not need to do every single frame! Many animators prefer to work on 2's, or have irregular timings with only necesary frames.)

The second option can be a bit trickier as it's more spatial. The in betweens rely on determining where an item is at, such as via a timing chart. The framerate may be consistent, such as constantly in 2's. You still draw in betweens as well, however the interpolation percentage and position varies depending on what frame it is. For instance, when easing out, with frame 1 being 0% and the final frame 10 being 100%, you might know frame 2 is 50%, frame 4 is 75%, frame 6 is 90%, and frame 8 is 95%. So instead of basing the positioning of your in betweens based on the surrounding frames, you'd only use those for consistency.

It all sounds complicated but hopefully the examples help explain it better.


*5. Smearing, motion blur, deformation*

Some elements that can help greatly with an illusion of smoothness are deformation and smearing. These are forms of distortion which honestly by itself could take up an entire video, so I'm gonna just cover the basics of it.

I'll start with smearing. Smearing is essentially an off model stretch of a component, as if you took a paint scraper and smeared the frame. There are many ways to draw smears that I won't go into here.

Smears work exceptionally well for fast motions that'd logically create motion blur. They can help cover choppier frames and make transitions look nicer. The key thing with smears is that their path needs to follow the path of the motion--you don't want a smear going off to the side, out of the path of motion.

Deformation works similarly and is meant to provide a sense of weight. If you remember me mentioning hair and cloth, they rely heavily on deformation as well, though in a slightly more realistic sense as in those cases deformation is part of the animation itself, rather than a modification to your frames.

Deformation with parts may mean as it's moving quickly, it stretches out, similar to how it would smear (though you definitely can use both simultaneously). Likewise the overshoot may result in it looking squashed, as if all the excess mass is slapping into the core of the form, before resting in place. This is respectively called stretch and squash. The key overall idea is to keep the total area or volume constant, just change the dimensions. A stretched item will get thinner and longer--a squashed will get flatter and fatter.

if ya wanna animate the animay tiddy, that's how you do the jiggle physics.

Smears and deforms usually are the finishing touches to an animation, but especially for hand drawn stuff you sometimes want to incorporate them during the in betweening process.


*6. Wobble

So your animation is now done, and you play it back again and... uh oh. Why does it look like this part is vibrating?

This is an annoying phenomenon I call 'wobble.' Wobble occurs when a motion's timing is inconsistent with the rest of the animation, if something interferes with its positioning, or sometimes if the drawing doesn't line up properly.

The only way I know of to address wobble is to scrub frame by frame with onion skinning on, and identify when and where the spacing doesn't line up. Wobble is the arch enemy of smooth animation--the best solution is to mitigate its occurence as you work, rather than trying to go back and patch it up.


*7. Playback, piecing things apart, andother tips*

Above all, the most important thing to making smooth animations is to work it out logically. Plan out your animations instead of just going straight at it, and prioritize the most important parts of your motions. Continually play the thing back multiple times and scrub through to make sure it looks nice and has the right timing. Make sure to use onion skinning and eliminate inconsistencies. When dealing with more complex entities, don't try to focus on how everything is animated at once--you may choose to just animate the torso and legs first, then the head, and then the arms for instance.

And remember, not everything needs to constantly move. Certain motions rely on elements being planted and mostly stationary.






---
SCRIPT2


Your animation looks sloppy? Choppy? You aimin for that glib smoothness like a buttered baby seal?

People tend to associate smooth animation with quality animation--which is a completely false equivalence as animation quality and animation smoothness aren't co-dependent. You can have good animation that isn't smooth, and smooth animation that looks like garbage, in addition to having animation that is both smooth and good, or is neither good nor smooth.

In fact in the quest to pursue smooth animation I see numerous animators fall into the latter category. They make egregious mistakes that not only prevent the animation from being smooth, but make them look mechanical and bad.


*1. YOU DON'T NEED TO USE 1'S

By far the biggest misconception I see is that to attain smooth animation, you need everything to be done at higher framerates or in 1's.

THIS IS NOT TRUE. While these elements can enhance ALREADY smooth animation, they will instead highlight faults with choppy animation. Additionally, smaller frame resolutions greatly amplify the amount of work you have to do, and also makes it more tedious to patch up. Which leads me to my next point:


*2. PRIORITIZE FRAMES

Another major fault I see is people trying to make things that should be in-betweens keyframes.

PRIORITIZE YOUR FRAMES. Each motion should be expressed in as FEW keyframes as possible. Don't worry about the space you have to cover to get from pose A to B. Just make sure pose A and B are strong and consistent.

Captain Underpants has amazing Flip-o-Rama technology that gets fluid animation with just 2 goddamn frames. You can follow the same principle.

If your animation is legible without that frame, IT IS NOT A KEYFRAME. DON'T DRAW IT (yet)


*3. ADD WEIGHT

RECOIL. ANTICIPATION. OVERSHOOT. If there's an element in motion, especially if it's fast, it has inertia it has to deal with, and it's going to need to prepare to accelerate, accelerate, overcompensate, and come to a rest. It won't necessarily do all 4 of these things every time, but for most cases it will.

Not every motion will have it but for those that would naturally have it it makes themlook a lot more organic. A lot of 'smooth' animations wind up just tweening from pose to pose, which even with easing looks robotic if there isn't a sense of weight. These should come before doing any actual in betweens.


*4. DON'T RELY ON STRAIGHT TWEENS

This is more for rigged animation but it also applies when doing in-betweens: don't just go straight from point A to point B. Do you need the movement to accelerate? Ease in. Do you need it to come to a rest? Ease out. Do you need it to do both, as if it's repositioning? Ease both.

It doesn't take much easing to make it work. And if you're doing hand drawn, or even animating a rig frame by frame, you can do easing via a timing chart, or via adjusting the timings of your in betweens as you draw them.


*5. DISTORT THINGS

Distortion comes in a few varities, such as smearing and deformation.

Smearing is basically hand-drawn motion blur. This can help mask fast motions or even give the illusion of motion in exceptionally fast cases, say if an item goes from point A to point B in just 2 frames. To keep this short I won't tell you how to make your smears, but just make sure their shape follows the path of motion.

Deformation is things like squash and stretch and can work in tandem with smearing or by itself. You wanna animate a grade-A animay tiddy? You wanna learn how deformation works. As an object accelerates, it'll stretch. As it stops, it'll squash, as if the weight is smashing into the rest of the object. In both cases the total volume or area should stay about the same, so stretching gets longer and thinner, while squashing makes it flatter and fatter.


*6. GET GOOD SCRUB

SCRUB THROUGH YOUR FRAMES AS YOU WORK! MAKE IT CONSISTENT

Constantly play back your stuff! Make sure that you don't get any wobbly phenomena where something looks like it's moving inconsistently or is shaking when it shouldn't be.

As you draw more frames, make sure htey're consistent. Use onion skinning.

Take things by part instead of trying to do everything at once. Animating a guy throwing a punch? Animate his fist first, then the body, then the arms. Don't try to draw an entire fully detailed version of him for each in between only to realize you're off on a few parts and fixing those screws up things you actually did well.


*7. YOU DON'T NEED EVERYTHING IN CONSTANT MOTION

Various motions don't need 'subtle details' to other parts, and when more novice animators do make these motions, they tend to overexaggerate them or their timings are inconsistent with the rest of the animation.

Unless you're skilled to the point that this tutorial is irrelevant, you shouldn't really worry about them until you understand what they add and specifically how much of them you need. Less is more with these. Some small details may include a subtle movement of the chest to show a character is breathing as they do something else.

Too often I see animators and non-animators alike who think smooth = constantly moving. That is bogus. Constant motion has nothing to do with smoonthness. It's something that's planned for from the start for certain animations. Only do it if your animation calls for it, and if you DO need to do that, make sure the movement is consistent and its speed doesn't fluctuate where it shouldn't, just like you should be doing for all motions in an animation.


[this is the part where the conclusion goes as well as the patreon supporters bit]



---









-Essential keyframes
-Pose to pose
-Overshoot / anticipation / recoil
-consistency
-TIMING
-easing
-wobble
-smearing / motion blur
-tips for rigs: LEARN TO HANDDRAW THE ANIMATION FIRST