# Why Ease-Out Is Preferred Over Ease-In for UI Animations: A Complete Guide to Custom Cubic-Bezier Curves

> Discover why ease-out beats ease-in for responsive UI animations. Learn how custom cubic-bezier curves create polished, brand-specific motion.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: deep-dive
- Published: 2026-08-05

---

**Ease-out creates the perception of faster, more responsive interactions by front-loading motion, while ease-in delays visual feedback and feels sluggish—making custom cubic-bezier curves essential for polished, brand-specific animations.**

Understanding **ease-out over ease-in for UI animations** is fundamental to building interfaces that feel instant and professional. According to the animation standards in the `emilkowalski/skills` repository, the choice of easing function directly impacts perceived performance and user satisfaction. This guide explains the perceptual science behind this preference and exactly when to deploy custom cubic-bezier curves for maximum impact.

## Why Ease-Out Feels Faster Than Ease-In

Human perception locks onto the **initial motion** of an element. When an animation starts fast and decelerates, users register movement immediately, making a 200ms transition feel snappier than the same duration with ease-in, which begins slowly and wastes the critical milliseconds when attention is highest.

The repository's [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) file codifies this insight with a hard rule: **"Never `ease-in` on UI"** [[`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md). This principle applies to all entering and exiting UI elements, where responsiveness is paramount.

## The Problem With Ease-In for Interface Elements

**Ease-in stalls the first visual cue**, creating a perceptual lag that compounds across high-frequency interactions. Buttons, dropdowns, toasts, and tooltips that use ease-in feel unresponsive because users must wait for acceleration to build before seeing meaningful movement.

The `improve-animations` skill explicitly flags any `ease-in` on UI as a finding requiring correction [[`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md)](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md). This enforcement mechanism ensures consistency across codebases audited with these standards.

## Choosing the Right Easing for Each Animation Type

The repository defines three categories of motion, each with a specific easing strategy:

| Animation Type | Recommended Easing | Rationale |
|---------------|-------------------|-----------|
| **Enter/exit animations** | `ease-out` | Starts fast for immediate feedback, ends slow for natural settling |
| **On-screen movement** (dragging, panels) | `ease-in-out` | Balanced acceleration and deceleration for longer travel distances |
| **Hover or color changes** | `ease` | Low-impact transitions where extreme responsiveness matters less |

These conventions appear in the "Easing" section of [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) [`skills/review-animations/STANDARDS.md#easing`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#easing).

## When to Use Custom Cubic-Bezier Curves

Built-in CSS easings are generic and often **too weak** for distinctive product experiences. Custom cubic-bezier curves provide the nuanced control needed for brand-specific motion languages.

### Standard Curves From the Repository

The `emilkowalski/skills` repository defines three production-ready custom curves as CSS custom properties in [`src/styles/tokens.css`](https://github.com/emilkowalski/skills/blob/main/src/styles/tokens.css) [[`skills/improve-animations/PLAN-TEMPLATE.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/PLAN-TEMPLATE.md)](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/PLAN-TEMPLATE.md):

| Variable | Curve | Use Case | Source |
|----------|-------|----------|--------|
| `--ease-out` | `cubic-bezier(0.23, 1, 0.32, 1)` | Strong UI entrances (buttons, dialogs) | [`STANDARDS.md#easing`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#easing) |
| `--ease-in-out` | `cubic-bezier(0.77, 0, 0.175, 1)` | Smooth on-screen movement | [`STANDARDS.md#easing`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#easing) |
| `--ease-drawer` | `cubic-bezier(0.32, 0.72, 0, 1)` | iOS-style drawer animations | [`STANDARDS.md#easing`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#easing) |

Reach for custom curves when:

- The default `ease-out` feels **too gentle** for your brand's personality
- You need to match **platform-native dynamics** (iOS, Material Design)
- The animation requires **exaggerated responsiveness** or **playful overshoot**

## Implementation: Defining and Using Easing Tokens

Centralizing curves in token files ensures consistency across components and simplifies future redesigns.

### Step 1: Define Tokens in [`src/styles/tokens.css`](https://github.com/emilkowalski/skills/blob/main/src/styles/tokens.css)

```css
/* src/styles/tokens.css */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* strong UI entrance */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* balanced movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS drawer feel */
}

```

This token architecture is referenced throughout the improvement plan template [[`skills/improve-animations/PLAN-TEMPLATE.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/PLAN-TEMPLATE.md)](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/PLAN-TEMPLATE.md).

### Step 2: Apply Ease-Out to Button Press Feedback

```css
.button {
  transition: transform 160ms var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

```

This pattern appears in the "Press feedback" section of the audit documentation [[`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md)](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md).

### Step 3: Animate a Drawer With Custom Cubic-Bezier

```css
.drawer {
  transition: transform 300ms var(--ease-drawer);
}

.drawer.open {
  transform: translateX(0);
}

.drawer.closed {
  transform: translateX(-100%);
}

```

The `--ease-drawer` curve mimics native iOS spring dynamics without requiring JavaScript physics engines.

### Step 4: Fade-In Entrance Animation

```css
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeIn 300ms var(--ease-out) forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

```

This matches the list item example in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md), which uses `fadeIn 300ms ease-out` [[`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md).

## Architectural Benefits of Ease-Out and Tokenized Curves

### Performance

Restricting animations to **GPU-friendly properties** (`transform` and `opacity`) combined with `ease-out` timing ensures smooth 60fps rendering across devices.

### Consistency

Centralizing curves in [`src/styles/tokens.css`](https://github.com/emilkowalski/skills/blob/main/src/styles/tokens.css) creates a **shared timing language** across all components. This reduces visual noise and makes global animation updates a single-line change.

### Accessibility

Fast-starting `ease-out` animations improve **perceptual speed for users with reduced motion preferences**. Because the critical motion happens immediately, animations can be shortened or disabled without losing the sense of instant feedback.

## Summary

- **Ease-out** starts fast and feels responsive; **ease-in** delays feedback and feels sluggish—making it unsuitable for UI per the `emilkowalski/skills` repository standards
- **`ease-out`** is the default for enter/exit animations, **`ease-in-out`** for on-screen movement, and **`ease`** for low-impact hover states
- **Custom cubic-bezier curves** replace built-in easings when you need stronger responsiveness or platform-native feel
- **Tokenize all curves** in [`src/styles/tokens.css`](https://github.com/emilkowalski/skills/blob/main/src/styles/tokens.css) for maintainability and consistent implementation
- The audit skill flags any `ease-in` on UI as a mandatory fix [[`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md)](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md)

## Frequently Asked Questions

### Why does ease-in feel slower even with the same duration?

Ease-in accelerates from zero, so the initial frames show minimal visible change. Human perception prioritizes **onset latency**—the time until motion becomes apparent. Ease-out front-loads displacement, making the animation feel instant even at identical durations.

### When should I use ease-in-out instead of ease-out?

Use **`ease-in-out`** for **on-screen movement** like dragging panels, sliding drawers, or marquee text where the element travels a significant distance. The balanced acceleration prevents jarring starts and stops. The repository specifies `cubic-bezier(0.77, 0, 0.175, 1)` for these cases [[`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md)](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md).

### How do I create a custom cubic-bezier curve for my brand?

Start with the repository's base curves and adjust control points:

- **More responsive**: Increase the y-value of the first control point (closer to `1` accelerates faster)
- **More playful**: Add slight overshoot with y-values above `1` or below `0`
- **More refined**: Match competitor products using browser DevTools to inspect their curves

Test with the Chrome DevTools cubic-bezier editor, then commit to [`tokens.css`](https://github.com/emilkowalski/skills/blob/main/tokens.css) once finalized.

### Is the "never ease-in on UI" rule absolute?

Yes, according to [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md): any `ease-in` on UI elements is flagged as a finding that **must** be replaced with `ease-out` or a stronger custom curve [[`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md)](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md). The only exception is **non-UI decorative motion** like background ambient effects where user responsiveness is irrelevant.