Easing and Motion Curves: Smooth Starts, Smooth Stops, and Natural Feel

Easing: the difference between mechanical and polished motion

If timing answers when something happens, easing answers how it feels while it happens. Two animations can have the same start time, end time, and duration, yet one feels robotic and the other feels natural—because the acceleration and deceleration are different.

In most motion graphics tools, easing is controlled by adjusting the interpolation between keyframes (often via an “easy ease” command and then refining the curve in a graph editor).

What ease-in and ease-out mean

• Ease-out: motion starts fast and slows down as it approaches the next keyframe. Think: pushing an object and letting it settle.
• Ease-in: motion starts slow and speeds up as it leaves a keyframe. Think: an object “deciding” to move, then committing.
• Ease-in-out: slow at the start, faster in the middle, slow at the end. This is the default “natural” feel for many UI and logo moves.

A useful mental model: easing is your control over acceleration. Real-world motion rarely changes speed instantly; it ramps up and ramps down.

Why linear motion looks stiff

Linear interpolation means the value changes by the same amount every frame. On screen, that reads as constant speed with instant changes at keyframes (an immediate start and an immediate stop). Those instant changes are what feel “mechanical.”

Linear motion can be appropriate for specific styles (e.g., deliberately robotic, technical, or grid-based motion), but for most polished motion graphics, you’ll want at least some easing at the start and end.

Continue in our app.

You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.

Or continue reading below...

Download the app

Reading motion curves: value graph vs speed graph

Most graph editors offer two ways to view easing. You don’t need to master both immediately, but you should know what each is telling you.

Value graph (a.k.a. “value over time”)

The value graph shows the property’s numeric value on the vertical axis and time on the horizontal axis.

• Straight line between keyframes = linear change (constant rate).
• Curved line = easing (changing rate).
• Steeper slope = faster change (more value change per time).
• Flattening near a keyframe = slowing down (ease).

For position, the value graph may show separate curves for X and Y. That can be powerful, but it can also be confusing because a clean path in space can still look odd if X and Y ease differently.

Speed graph (a.k.a. “speed over time”)

The speed graph shows how fast the property is changing (speed) over time.

• High peak = fast movement.
• Low/near zero = slow movement or stop.
• Symmetric hill often reads as smooth ease-in-out.
• Sharp corners can indicate abrupt changes (jerkiness).

For beginners, the speed graph is often the quickest way to see whether your motion ramps up and down smoothly.

Practice 1: Apply easing to position (step-by-step)

This exercise builds a clean, overshoot-free move that feels intentional. Use any simple shape layer (a circle works well) and animate its position from left to right.

Step 1 — Create two position keyframes

• At time 0:00, set Position to the starting point.
• At time 0:01 (or any duration you choose), set Position to the ending point.

Preview: it will likely look linear and stiff.

Step 2 — Apply a basic ease-in-out

• Select both keyframes.
• Apply your software’s standard easing (often called Easy Ease).

Preview again: the move should feel smoother, but may still feel generic.

Step 3 — Read the graph

• Open the graph editor.
• Switch to speed graph if available.
• Look for a single “hill” shape: low at the start, rising to a peak, then returning low at the end.

If the hill is very small and flat, the move may feel sluggish. If it’s extremely tall and narrow, it may feel like a sudden whip.

Step 4 — Make the move feel “designed” (snappier arrival)

A common motion-graphics choice is a quicker start with a controlled, gentle landing.

• Increase the influence on the outgoing side of the first keyframe (stronger ease-out).
• Increase the influence on the incoming side of the last keyframe (stronger ease-in).

In a value graph, you’re shaping the curve so it’s steeper in the middle and flatter near the ends. In a speed graph, you’re shaping a smoother hill with a peak that fits the distance traveled.

Step 5 — Check for overshoot-free motion

For a simple “move from A to B and stop,” you typically want the position to arrive exactly at the final value without crossing it.

• In the value graph, ensure the curve approaches the final keyframe without looping past it.
• Avoid S-curves that cross beyond the endpoint unless you intentionally want overshoot.

Practice 2: Apply easing to scale (step-by-step)

Scale easing is where beginners often accidentally create bounce or jitter because scale changes are very noticeable.

Step 1 — Create two scale keyframes

• At 0:00, set Scale to 0% (or 80% if you want a subtler pop-in).
• At 0:12 (example), set Scale to 100%.

Step 2 — Apply easing

• Select both scale keyframes and apply Easy Ease.

Step 3 — Refine the curve handles for a clean settle (no bounce)

To keep it overshoot-free, you want the scale to approach 100% smoothly and stop.

• In the value graph, the scale curve should rise and then flatten as it reaches the last keyframe.
• Adjust the last keyframe’s incoming handle so the curve becomes nearly horizontal right at the end (this reduces “micro-wobble”).
• Make sure the curve does not go above 100% unless you intentionally want a pop/overshoot.

Step 4 — Optional: “snappy but not bouncy” pop-in

If you want a more energetic scale-up without overshoot, increase the mid-motion speed rather than crossing 100%.

• Steepen the middle portion of the value curve (or raise the peak in the speed graph).
• Keep the end flattened so it still settles cleanly at 100%.

Refining easing with curve handles (and avoiding accidental overshoot)

Basic easing gets you 70% of the way. Curve handles get you the last 30%: the difference between “smooth” and “intentional.”

What curve handles control

• Influence: how much of the time near a keyframe is spent accelerating/decelerating.
• Speed at the keyframe: how fast the property is moving as it leaves or arrives at that keyframe.

In practical terms: longer handles often mean a more gradual ramp; shorter handles often mean a tighter, snappier change.

Overshoot-free checklist (position/scale)

• In a value graph, the curve should not cross beyond the final value for a “stop” motion.
• In a speed graph, speed should approach 0 at the final keyframe if the object is meant to stop.
• Avoid sharp corners in the curve near the end; corners often read as a tiny “hit” or stutter.

Rules of thumb for choosing easing strength

1) Stronger ease for larger moves

The farther something travels, the more your eye expects a clear ramp up and ramp down. Large moves with weak easing look like sliding; large moves with stronger easing feel like they have weight and intention.

• Large position changes: use a noticeable ease-in-out or a snappy ease-out + gentle ease-in.
• Large scale changes: ease more than you think, especially on the last 20% of the motion.

2) Subtle ease for small UI-like moves

Small nudges (like 8–20 px shifts or tiny scale changes) can feel “floaty” if you over-ease them. For UI-style motion, keep easing present but restrained.

• Prefer gentle ease-in-out with a modest peak speed.
• Keep the settle clean: speed should reach zero without wobble.

3) Keep easing consistent across similar elements

If three icons enter the screen the same way, they should share the same easing profile (even if they’re offset in time). Inconsistent easing makes a design feel unpolished because the viewer senses different “physics” for similar objects.

• Reuse the same keyframe easing (copy/paste keyframes or save presets).
• Match curve shapes in the graph editor for repeated motions.

Troubleshooting: jitter, unwanted bounce, inconsistent curves

Problem: Jitter or tiny shaking near the end

Common causes

• Speed doesn’t actually reach zero at the final keyframe.
• Curve has a sharp corner or a tiny bump near the end.
• Separate X and Y curves ease differently, creating a subtle directional twitch.

Fixes

• In the speed graph, ensure the last keyframe’s incoming speed goes to 0.
• Soften the last handle so the curve flattens as it arrives.
• If using separate dimensions, try matching influence on X and Y (or use a unified position graph if your tool supports it).

Problem: Unwanted bounce (overshoot) when you wanted a stop

Common causes

• Value curve crosses past the final value (scale goes above 100%, position goes beyond the endpoint).
• Auto-smoothing or “continuous” interpolation creates an overshoot between keyframes.

Fixes

• In the value graph, pull handles back so the curve approaches the keyframe without crossing it.
• If your software has keyframe interpolation types, switch the final keyframe to a mode that prevents overshoot (often called clamped, auto-clamp, or similar).
• Add a helper keyframe close to the end to force the curve to behave (e.g., a keyframe at 90–95% of the duration with a value still below the final value).

Problem: Inconsistent curves across multiple elements

Common causes

• Applying “easy ease” to some layers but manually adjusting others.
• Different distances traveled with identical easing, causing different perceived speed.

Fixes

• Standardize: pick one easing profile for a family of elements and reuse it.
• For different travel distances, adjust peak speed so the feel matches (larger distance often needs a higher peak speed or slightly longer duration).
• Compare in the speed graph: similar elements should have similarly shaped speed hills (scaled appropriately for distance).