Animation curves are the secret weapon behind smooth, believable motion in animation and motion graphics. They control not just where something moves, but how it moves – the timing, speed, and overall feel. Think of them as the choreographer of your animations.

Do you try random curves to see what sticks?

Well, I did too as after watching countless videos I still didn't had them by heart as to what curve will do what for me

Before we dive in, let's talk about easing. You can apply an ease to the start (ease-in), end (ease-out), or both (ease-in-out) of any curve type:

Ease-In: Starts slow, gradually accelerates. Like winding up for a punch.
Ease-Out: Starts fast, gradually slows down. The follow-through after a jab.
Ease-In-Out: Combines both for a smooth acceleration and deceleration. This feels the most natural for many movements.

1. Linear Movement (No Easing):

Imagine: The dot moves from point A to point B at a constant speed.
The Feel: This looks robotic and unnatural. Real-world objects rarely start and stop so abruptly.

2. Ease-In Animation curves:

Imagine: The dot starts slowly from point A, then gradually speeds up as it approaches point B.
The Feel: This is like pushing a heavy object – it takes effort to get it moving, but it gains momentum.
Example: A car accelerating from a stop sign.

3. Ease-Out Animation Curves:

Imagine: The dot starts fast from point A, then gradually slows down as it gets closer to point B.
The Feel: This is like a ball rolling to a stop. It loses energy and settles.
Example: A Soccer ball coming to a stop

4. Ease-In-Out Animation Curves:

Imagine: The dot starts slowly, speeds up in the middle, and then slows down again as it reaches point B.
The Feel: This is the most natural motion for many objects. It combines the smooth start of ease-in with the gentle stop of ease-out.
Example: A pendulum swinging.

Which keyframe do I add my curve to?

This took me the most time to understand that not each keyframe needs a curve,
For example for point A to B animation, you only have to keyframe point A.
In point A, B and C, you need to keyframe point A and B, the last keyframe is the receiving keyframe

In the animation below the pendulum
• The start peak point on the left is my A point,
• The Peak on the right is the B point and then again the
• Left peak is my C point to complete my loop

Only Point A with ease in-out Curve

Only Point A and B with ease in-out Curve

Only Point A and C with ease in-out Curve

More A to point B testing

As I understood more, I wanted to tryout with different types of curves, and there are many but I picked the 6 most used to test in our rive animation.
I picked a boxing guy punching from point A to B to understand how does each punch land with these curves and how it affects the animation

Meet the Curves: Six Styles for a Knockout Punch!

Sine: This is literally the bare minimum you can do with a linear graph, graph is manipulated slightly. I found this most boring for my boxing case but I would assume it would have its use case in adding subtlety to some animations.
- Ease-In: Slow build up to punch end point
- Ease-Out: less build up to land the punch.
- Ease-In-Out: The whole punch feels fluid and soft.
Circular: Similar to sine, but a touch sharper.
- Ease-In: A more distinct wind-up, building anticipation and landing a bit more power to the punch.
- Ease-Out: A slightly faster follow-through, emphasizing speed.
- Ease-In-Out: Snappy and precise, like a well-aimed jab.
Cubic: This one offers more control, sharper changes in speed. its easing is usually the one we use by default in rive
- Ease-In: A slower, deliberate start. Perfect for a heavy haymaker.
- Ease-Out: Faster start and an quick stop, highlighting the impact.
- Ease-In-Out: smooth anticipation and landing makes a punch feel soft but smooth.
Expo (Exponential): More exaggeration and sharpness in the animation.
- Ease-In: The punch springs out quickly delayed after some anticipation, full of energy.
- Ease-Out: Slower impact on the bag, minimum anticipation.
- Ease-In-Out: The entire movement feels playful and exaggerated, short buildup and strong landing.
Elastic: Simulates a rubber band stretching and snapping back.
- Ease-In: The arm winds back far, then shoots forward like a slingshot.
- Ease-Out: A jiggly rebound after impact, punch lands in a snap (sting like a BEE).
- Ease-In-Out: The punch feels stretchy and over-the-top, great for comedic effect, the arm moves like a cartoon.
Back (Outback): Creates anticipation by briefly moving backward, talk about exaggeration.
- Ease-In: The arm goes back before hitting forward, makes the punch appear much stronger.
  (you don't need to add a back keyframe for it, you curve will move the arm)
- Ease-Out: Punch lands quickly but arm springs beyond its end point, Lesser power than Ease In.
- Ease-In-Out: Th e most exaggerated back-and-forth, emphasizing both anticipation and the force of impact.

Animation curves What are they?