Overshoot- the missing animation principle

Instead of bashing the head against the wall, the “Gods” of animation gave us the 12 principles, which makes any animation better while utilizing them. part of the Animation principles are a translation of the physical forces surrounding us and determine how an object moves (Gravity, friction, inertia etc’), and it’s important that those forces are seen through our animation so it will look reliable. but i didn’t wrote this blog to mumble about these principles, but to talk about a missing principle (at least for the “naked” eye) among the 12 chosen ones:

Overshoot- this principle says that any object that is stopping, will miss the stop point a bit before stopping eventually, reminds a pendulum a little. to understand this in a quick way you could try it for yourself:

1. put your right arm in front of you and make a fist while the arm stay straight.
2. now take your fist down in a strong and fast manner, and stop it at once (before you brake something).

as you can see, the fist missed its “planned” stopping point, and continued a bit until it came back to that point.using the overshoot principle in  animation, will help to create a much more reliable and smooth animation. and you can achieve this in three simple ways:

1. first method – Manually: you can create the first and the last keyframes of the animation and then duplicate the last keyframe and change their value so you’ll get a nice overshoot. example:

a. create two keyframes on the scale value of a layer, the first keyframe with the value of 0% and the second with the value of 200%.

b. copy the second keyframe (100%) 5 more times with equal spaces between them.

c. change the values of the added keyframes (second until the last) to 120%, 90%, 105%, 97.5%, 101.25% and finally 100%. this will create an overshoot effect that’s getting smaller by half on every “Bounce”.

d. change all the keyframes (except the first one) to Easy Ease so you’ll get a smoother animation.

tip: change the In and Out influence value of the Easy Ease keyframes to 50%, so you’ll get more “energetic” acceleration.

2. Second method – Graph: you can create the first and the last keyframes of the animation, duplicate them a few times and edit them with the Graph to get a nice decay of the Overshoot.

a. on the rotation value of the layer, create two keyframes. the first with the value of 90 and the second with the value of 0.

b. duplicate the keyframes 4 times with even spaces, and convert them to Easy Ease except the first keyframe.

c. open the Graph editor and select the Value graph.

d. select the rotation value, so you could see its animation graph. now you can select all the keyframes but the first and create the overshoot graph by grabbing the edges of the selection box while holding Alt button. you can repeat this step as needed.

3. Third Method- Expressions: you can create the first and the last keyframes, and use an expression that makes the overshooting animation automatically.

a. on the position value of the layer, create two keyframes with a distance of 5 frames between them.

b. press Alt+Click on the position stopwatch and paste the following expression (credit: Dan Ebberts- MotionScript):

freq = 3;
decay = 5;

n = 0;
if (numKeys > 0){
  n = nearestKey(time).index;
  if (key(n).time > time) n--;
}
if (n > 0){
  t = time - key(n).time;
  amp = velocityAtTime(key(n).time - .001);
  w = freq*Math.PI*2;
  value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);
}else
  value

c. change the "freq" and "decay" properties to change the overshoot animation.

(9684)