cycle-atlas/.agents/skills/animation-principles/references/easing-graph-editor.md

Easing in the After Effects Graph Editor

Tool-specific craft for turning the abstract easing principles into hand-shaped After Effects keyframes. The concepts here (slow-in/slow-out, asymmetric easing, overshoot, bounce) apply everywhere; the controls are AE's Graph Editor.

The principle: slow-in / slow-out

Natural motion accelerates from rest and decelerates to rest — "slow-in, slow-out". Constant-speed (linear) motion reads as robotic because nothing physical starts and stops instantly. Easing means shaping how fast a property changes over time, not just its start and end values.

Graph Editor basics

Open with the Graph Editor button (the curve icon) in the Timeline (or Shift+F3). It replaces the keyframe strip with curves.

Two graph modes, switched via the graph type menu at the bottom of the Graph Editor:

• Value Graph — plots the property's value over time (e.g., X position in pixels). The line's height = the value; its slope = the speed.
• Speed Graph — plots the rate of change (speed) over time. The line's height = speed; a hump = fast, a valley near zero = slow/stopped.

How to tell which is shown: Open the graph type menu → "Edit Value Graph" / "Edit Speed Graph" shows the current choice (the active one is checked). Quick tell: for a single moving property, the Speed Graph reads as a hill (accelerate up, decelerate down); the Value Graph reads as an S-curve climbing from start value to end value. Spatial properties (Position) usually default to the Speed Graph; single-dimension properties to the Value Graph.

For shaping ease feel, the Speed Graph is the most intuitive: flatten the ends toward zero (slow start/stop), let the middle rise (fast).

Display tips

• Enable "Show Reference Graph" to see the other graph faintly behind the editable one.
• "Snap" and "Fit selection to view" make handle work easier.

Why Easy Ease is rarely enough

F9 (Easy Ease) applies a symmetric ease with ~33% influence on both sides. It's a starting point, not a finished move. Two reasons it falls flat:

1. Symmetry. Most compelling motion is asymmetric — e.g., snappy UI eases out hard (fast start, long glide to stop) far more than it eases in.
2. Low influence. 33% is gentle. Strong, modern motion-design easing pushes influence to 80–90% on the deceleration side, producing a sharp launch and a smooth settle.

So: start with F9, then open the Graph Editor and drag the bezier handles to make it asymmetric and increase influence.

Handle techniques

In the Graph Editor each keyframe has bezier handles:

• Pull a handle horizontally (longer) → more influence → the ease extends further in time → smoother, slower approach.
• Pull a handle down toward zero speed → the property comes more fully to rest at that keyframe.
• Ease out 80–90%: select the final keyframe, drag its incoming handle nearly flat and long so speed glides to near-zero over most of the move. This is the core "snappy" feel.
• Overshoot: let the value go past the target, then settle back. In the Value Graph, push the curve above the end value briefly, then return. Or add a small keyframe past the target and ease back.
• Bounce: repeated decaying overshoots — the value hits, overshoots less each time, settling. Build with successive keyframes of decreasing amplitude, each eased.

Influence and velocity numbers

Right-click a keyframe → Keyframe Velocity to set exact values:

• Incoming/Outgoing Velocity — the speed at the keyframe (units/sec). Zero = full stop.
• Influence % — how far the ease extends toward the neighboring keyframe. Higher = smoother, longer ease.

Targets:

• Snappy UI move: outgoing influence ~15–25% (quick launch), incoming influence 80–90% (long settle).
• Smooth symmetric float: both sides ~50–65%.
• Anticipation: a small reverse move before the main action (pull back, then go).

Recipe table

Feel	Speed Graph shape	Outgoing inf.	Incoming inf.	Notes
Snappy UI	sharp rise, long tail to 0	10–25%	80–90%	The default "good" motion-design ease
Smooth float	gentle symmetric hill	50–65%	50–65%	Calm, even, no snap
Anticipation	dip below 0 then rise	add pre-keyframe	70–85%	Tiny reverse move first
Overshoot	rise, overshoot value, settle	20–40%	85–95%	1 extra keyframe past target
Bounce	repeated decaying humps	per-bounce	per-bounce	Decreasing amplitude keyframes

Quick reference

Action	How
Open Graph Editor	Curve icon in Timeline (or Shift+F3)
Apply Easy Ease	F9 (Ease In Shift+F9, Ease Out Ctrl/Cmd+Shift+F9)
Switch Value/Speed graph	Graph type menu (bottom of Graph Editor)
Set exact velocity	Right-click keyframe → Keyframe Velocity
Convert to bezier handles	Easy Ease, then drag handles
Strong settle	Incoming influence 80–90% on last keyframe

Step-by-step recipes

Snappy UI ease (the workhorse)

1. Set two Position (or Scale) keyframes for the move.
2. Select both, press F9 (Easy Ease).
3. Open Graph Editor → Speed Graph.
4. Select the first keyframe; shorten its outgoing handle (low influence, ~15–25%) so it launches fast.
5. Select the last keyframe; pull its incoming handle long and nearly flat to the time axis — influence 80–90% — so it glides to a stop.
6. Result: fast start, long smooth settle. This is the standard "premium" motion-design feel.

Exact via Keyframe Velocity (right-click keyframe):

• First keyframe: Outgoing influence 18%, velocity 0.
• Last keyframe: Incoming influence 85%, velocity 0.

Overshoot

Goal: element flies in, slightly passes its target, settles back.

1. Animate from start to target value (2 keyframes), ease.
2. Add a third keyframe ~6–10 frames before the final, set its value past the target (e.g., target 100% → set 112%).
3. Final keyframe returns to target (100%).
4. Ease all keyframes; give the settle keyframes high incoming influence (85–95%).
5. Tune overshoot amount (how far past) and settle time for snappiness.

Value Graph view: the curve rises above the target line, then dips back down to it.

Anticipation

Goal: a small reverse move before the main action (wind-up).

1. Before the main motion's first keyframe, add a keyframe that moves slightly opposite the main direction (e.g., a jump-up preceded by a small crouch-down).
2. Ease the wind-up gently, then the main move fast (low outgoing influence).
3. Optionally combine with overshoot on the landing for a full squash-stretch feel.

Bounce (hand-keyed)

1. First keyframe: rest/start.
2. Impact keyframe: the object hits the floor value.
3. Bounce keyframes: each successive peak is lower than the last (decaying amplitude), spaced closer in time (decreasing period).
4. At each floor contact, set incoming/outgoing velocity sharp (near-instant direction change); at each peak, ease to near-zero speed (apex).
5. 3–4 decaying bounces usually read as natural.

Amplitude example for a drop settling to 0: 0 → -200 (rise) → 0 → -90 → 0 → -35 → 0 → -12 → 0, with shrinking time gaps.

Bounce (expression)

Apply to a property (e.g., Position) after a single ease-in keyframe to auto-generate decaying bounce:

amp = 0.12;       // bounce strength
freq = 2.5;       // bounces per second
decay = 5.0;      // how fast it settles
n = 0;
if (numKeys > 0) { n = nearestKey(time).index; if (key(n).time > time) n--; }
if (n > 0) {
  t = time - key(n).time;
  v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
  value + v*(amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t));
} else { value; }

• amp raises the overshoot height; freq the number of wobbles; decay how quickly it stops.
• Place a single eased keyframe (or two) where the motion arrives; the expression adds the bounce after.

Velocity / influence cheat sheet

Feel	Out influence	In influence	Velocity at stops
Snappy UI	15–25%	80–90%	0
Smooth float	50–65%	50–65%	0
Mechanical/linear	0%	0%	constant
Overshoot settle	20–40%	85–95%	0 at final
Bounce apex	high	high	0 at apex
Bounce impact	low	low	sharp/non-zero

Gotchas

• Easy Ease ≠ finished. It's a 33% symmetric starting point; almost always refine in the Graph Editor.
• Know your graph. Editing a Value Graph thinking it's a Speed Graph produces confusing results — confirm in the graph type menu.
• Influence is per-side. Asymmetric influence (low out, high in) is what makes UI motion feel snappy.
• Spatial vs temporal. Position has both a motion path (spatial bezier in the Composition viewer) and speed easing (Graph Editor). A floaty arc may be a spatial handle issue, not temporal. Right-click a Position keyframe for Rove Across Time and spatial interpolation (Linear/Auto/Continuous Bezier).
• Auto-Bezier roving keyframes can smooth speed across multiple keyframes but remove precise per-keyframe timing — use deliberately.
• Overshoot needs room past the target — clamp/limits or layout edges can hide it.
• Bounce by hand is tedious; expression-driven bounce (decaying sine) is common, but hand-keyed gives the most control.