# Creating Smooth Easing Curves in After Effects

## Introduction

Easing is the secret ingredient that separates amateur animation from professional motion design. While linear motion moves objects at a constant speed, easing adds acceleration and deceleration that mimics how objects move in the real world.

In this guide, we'll explore the fundamentals of easing curves, how to use After Effects' Graph Editor effectively, and practical techniques you can apply to your projects immediately.

<Callout type="info" label="Prerequisites:">
This tutorial assumes basic familiarity with After Effects keyframes and the timeline panel.
</Callout>

## Understanding Easing

At its core, easing defines *how* a value changes over time between two keyframes. Instead of moving at a constant rate, eased motion accelerates, decelerates, or both, creating movement that feels natural and intentional.

### Linear vs Eased Motion

Linear motion is the default in After Effects. When you set two position keyframes, the object moves at exactly the same speed from start to finish. This works for mechanical objects but feels robotic for organic motion.

<Collapsible title="Why Linear Motion Feels Wrong" defaultOpen={true}>
Nothing in the real world moves linearly. When you throw a ball, it accelerates as it leaves your hand and decelerates due to gravity and air resistance. When a car starts moving, it gradually accelerates rather than instantly reaching top speed.

Our brains are wired to expect this natural motion. Linear animation triggers an uncanny valley effect: something feels off even if the viewer can't articulate why.
</Collapsible>

### The Graph Editor

The Graph Editor is your primary tool for creating and refining easing curves. Access it by clicking the graph icon in the timeline panel or pressing Shift + F3.

<CodeBlock
  language="Keyboard Shortcuts"
  code={`Shift + F3  →  Toggle Graph Editor
U          →  Show all keyframes on selected layer
F9         →  Easy Ease (apply to selected keyframes)
Shift + F9 →  Easy Ease In
Cmd + Shift + F9 → Easy Ease Out`}
/>

## Common Easing Curves

While you can create infinite variations, most motion design work uses a handful of fundamental easing types. Understanding these basics gives you a strong foundation.

### Ease In

Ease In starts slow and accelerates toward the end. Think of a ball rolling off a table. It starts with potential energy and gains speed as gravity takes over.

**Best for:** Objects exiting the frame, elements disappearing, anything moving away from the viewer.

### Ease Out

Ease Out is the opposite: fast start, gradual deceleration. Like a car coming to a stop or a drawer sliding closed.

**Best for:** Objects entering the frame, elements appearing, UI transitions, anything settling into position.

<Callout type="tip" label="Pro Tip:">
Ease Out is your default choice for most UI animations. It creates a snappy, responsive feel that users expect from modern interfaces.
</Callout>

### Ease In-Out

Ease In-Out combines both. Slow start, fast middle, slow end. This is the classic "smooth" animation feel, ideal for objects that start and end at rest.

**Best for:** Objects moving from one resting position to another, transitions where both states are visible, looping animations.

## Custom Curves

While presets are convenient, custom curves give you precise control over timing. In the Graph Editor, you can adjust bezier handles to create any curve shape.

<Collapsible title="Understanding Bezier Handles">
Each keyframe has two bezier handles that control the curve's shape. The **incoming handle** (left) affects how the animation approaches the keyframe. The **outgoing handle** (right) affects how it leaves.

- Longer handles = more gradual acceleration/deceleration
- Shorter handles = snappier motion
- Angled handles = asymmetric easing
</Collapsible>

A popular custom curve is the "expo out": extremely fast start with a long, gradual deceleration. This creates punchy, modern motion.

<CodeBlock
  language="CSS"
  filename="easing-curves.css"
  code={`/* Common easing curves as CSS cubic-bezier */

/* Ease Out Expo - Punchy, modern feel */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

/* Ease Out Back - Slight overshoot */
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Ease In Out Cubic - Smooth, classic */
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

/* Ease Out Quart - Strong deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);`}
/>

## Using Expressions

For precise, repeatable easing, expressions offer powerful control. After Effects' expression language lets you define exact mathematical curves.

<CodeBlock
  language="JavaScript"
  filename="easing-expression.js"
  code={`// Custom ease out expo expression
// Apply to any property with keyframes

const t = linear(time, inPoint, outPoint, 0, 1);
const easeOutExpo = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);

const startVal = [0, 0];  // Start position
const endVal = [1920, 0]; // End position

linear(easeOutExpo, 0, 1, startVal, endVal);`}
/>

## Best Practices

1. **Match easing to context.** UI elements entering the screen should ease out. Elements leaving should ease in. Don't use the same easing for everything.
2. **Keep it consistent.** Once you establish an easing style for a project, stick with it. Mixing different easing curves creates visual discord.
3. **Don't overdo it.** Extreme easing curves can feel gimmicky. Subtle, refined curves often look more professional than dramatic ones.
4. **Test at full speed.** Easing that looks good in slow-motion preview might feel different at real-time. Always preview at 100% speed before finalizing.

## Resources

Here are some helpful tools and references for working with easing curves:

- [easings.net](https://easings.net): visual reference for common easing functions
- [cubic-bezier.com](https://cubic-bezier.com): interactive bezier curve editor
- [GSAP Ease Visualizer](https://greensock.com/ease-visualizer): GreenSock's comprehensive easing tool

---
Source: https://ryanjohnson.io/blog/easing-in-after-effects