Easing Decision Framework for Different UI Situations: A Complete Guide

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 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 line 294

Apply the Frequency-Based Decision Matrix

Both STANDARDS.md and 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 line 7, with the "Decision order for easing" heading located in /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 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.

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.

/* 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 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:

@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	Core "never ease-in" rule, frequency → decision table, cubic-bezier token definitions
/skills/improve-animations/AUDIT.md	"Decision order for easing" checklist for audits
/skills/animate/SKILL.md	Easing resources and strong custom curve policy
/skills/animate/RECIPES.md	Implementation patterns including blur-masking
/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 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 and 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.

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 line 294, implemented as a secondary animation alongside the opacity transition.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}