# Easing Decision Framework for Different UI Situations: A Complete Guide

> Master the easing decision framework for UI animations. Learn how to choose the right easing curves based on action type, impact, and product personality with clear rules for better UX.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-08-06

---

**The emilkowalski/skills repository defines a three-pillar framework for choosing easing curves based on UI action type, frequency/impact, and product personality, with hard rules like "never `ease-in` on UI" and mandatory custom cubic-bezier tokens.**

Choosing the right easing curve separates polished interfaces from clunky ones. The `emilkowalski/skills` repository codifies a repeatable decision framework that keeps motion feeling intentional, fast, and accessible. This system appears across animation standards files and is designed for immediate implementation by frontend teams.

## Identify the UI Situation

The framework starts with classifying the interaction. Each situation maps to a specific easing recommendation:

| Situation | Recommended Default Easing |
|-----------|----------------------------|
| **Enter / reveal** (dialog sliding in, toast appearing) | `ease-out` or strong custom cubic-bezier like `cubic-bezier(0.77, 0, 0.175, 1)` |
| **Exit / hide** | Avoid `ease-in`; use matching `ease-out` for symmetry, or an inverse curve for reversible transitions |
| **Moving / morphing on-screen** (drag, reorder, carousel) | Strong `ease-in-out` — see the custom token in [`/skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main//skills/review-animations/STANDARDS.md) line 22 |
| **High-frequency interactive feedback** (button press, toggle) | No easing or very short `ease-out` (~100ms) to eliminate visual delay |
| **Cross-fade between states** | Same `ease-out` curve; add subtle blur (≤2px) if overlap looks "double-exposed" — see [`/skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main//skills/animate/RECIPES.md) line 294 |

## Apply the Frequency-Based Decision Matrix

Both [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) and [`AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/AUDIT.md) encode a frequency → decision matrix that determines how strictly to enforce easing rules. The exact table appears in [`/skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main//skills/review-animations/STANDARDS.md) line 7, with the "Decision order for easing" heading located in [`/skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main//skills/improve-animations/AUDIT.md) line 20.

| Frequency | Decision |
|-----------|----------|
| **High** (primary navigation, modal dialogs) | Mandatory strong custom curve; **never** `ease-in` |
| **Medium** (secondary panels, lists) | Prefer default token; lighter custom curve allowed if visual weight feels heavy |
| **Low** (decorative micro-animations) | Any token acceptable; prioritize consistency |

## Hard Rules That Never Change

The repository enforces three non-negotiable principles:

- **Never `ease-in` on UI** — The standards explicitly state: "It starts slow, delaying the exact moment the user is watching. `ease-out` at 200ms *feels* faster than `ease-in` at 200ms." This rule appears in [`/skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main//skills/review-animations/STANDARDS.md) line 27.

- **Use strong custom curves** — Built-in CSS easings are considered "too weak." The repository recommends sourcing curves from **easing.dev** and **easings.co**.

- **Mirror reversible transitions** — Outbound curves should invert inbound curves, following Apple design patterns documented in [`/skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main//skills/apple-design/SKILL.md).

## Token-Driven Implementation

Easing curves live as design tokens for consistency and searchability. When fixing findings, you inline the exact cubic-bezier or update the token — never hand-roll new values.

```css
/* Token definition in design-system CSS */
:root {
  --ease-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Entrance animation using the token */
.dialog-enter {
  animation: slideIn 200ms var(--ease-out-strong) forwards;
}

/* Cross-fade with blur mask for overlap issues */
.fade-enter {
  animation:
    fadeIn 300ms var(--ease-out-strong) forwards,
    blurIn 300ms var(--ease-out-strong) forwards;
}

@keyframes blurIn {
  from { filter: blur(2px); }
  to   { filter: blur(0); }
}

```

```javascript
// JavaScript token access (React example)
import tokens from '@/design/tokens.css';

const toast = {
  duration: 1200,
  easing: getComputedStyle(document.documentElement)
            .getPropertyValue('--ease-out-strong')
            .trim(),
};

element.animate([{ opacity: 0 }, { opacity: 1 }], toast);

```

## Respect Reduced Motion

All easing decisions gate behind `prefers-reduced-motion`. When users opt in, animations drop to `duration: 0` or simple fades without easing:

```css
@media (prefers-reduced-motion: reduce) {
  .dialog-enter,
  .fade-enter {
    animation-duration: 0ms;
    animation-timing-function: linear;
  }
}

```

## Key Source Files

| File | Purpose |
|------|---------|
| [`/skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main//skills/review-animations/STANDARDS.md) | Core "never `ease-in`" rule, frequency → decision table, cubic-bezier token definitions |
| [`/skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main//skills/improve-animations/AUDIT.md) | "Decision order for easing" checklist for audits |
| [`/skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main//skills/animate/SKILL.md) | Easing resources and strong custom curve policy |
| [`/skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main//skills/animate/RECIPES.md) | Implementation patterns including blur-masking |
| [`/skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main//skills/apple-design/SKILL.md) | Reversible transition mirroring |

## Summary

- Classify UI actions into five situations (enter, exit, move, feedback, cross-fade) to determine base easing
- Consult the frequency matrix (high/medium/low) to set enforcement strictness
- Follow hard rules: **never `ease-in`**, use strong custom curves, mirror reversible transitions
- Implement via design tokens for consistency and maintainability
- Always respect `prefers-reduced-motion`

## Frequently Asked Questions

### Why is `ease-in` banned for UI animations?

`ease-in` starts slow and accelerates, delaying the visual response that users expect. According to [`/skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main//skills/review-animations/STANDARDS.md) line 27, this creates perceived sluggishness even at identical durations. `ease-out` feels faster because the motion is front-loaded where user attention peaks.

### Where should I source custom cubic-bezier curves?

The repository recommends **easing.dev** and **easings.co** as authoritative resources. These provide mathematically sound curves stronger than CSS defaults, documented across [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) and [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md) files.

### How do I handle reversible transitions like toggles or accordions?

Mirror the easing: the outbound animation uses the inverse curve of the inbound. This creates symmetrical, predictable motion. The pattern is detailed in [`/skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main//skills/apple-design/SKILL.md).

### What happens if a cross-fade looks "double-exposed"?

Add a subtle blur mask (≤2px) that fades out during the transition. The specific technique appears in [`/skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main//skills/animate/RECIPES.md) line 294, implemented as a secondary animation alongside the opacity transition.