How to Choose the Right Easing Curve for UI Animations

Use custom cubic-bezier curves instead of CSS defaults, apply asymmetric easings for natural motion, and enforce consistency through standardized tokens that prioritize exit-velocity over entrance-resistance.

Selecting the appropriate easing function determines whether your interface feels responsive or mechanical. The emilkowalski/skills repository treats easing as a first-class design decision rather than a cosmetic afterthought, codifying strict standards and audit rules across its skill-based documentation system. This guide extracts the concrete decision frameworks from that repository to help you implement motion that feels intentional and polished.

Why Built-in CSS Easings Are Too Weak

According to skills/emil-design-eng/SKILL.md, the built-in CSS easing keywords—ease, ease-in, ease-out, and linear—are considered "too weak" for professional UI work. These defaults lack the nuance required for modern interface motion, often resulting in transitions that feel either too mechanical or too sluggish.

The repository mandates that custom cubic-bezier curves should be your default choice. Standard CSS easings were designed for broad compatibility rather than specific UX goals, whereas custom curves allow precise control over acceleration and deceleration phases that match the physics of real-world objects.

The Standardized Token System

The skills/review-animations/STANDARDS.md file establishes a strict vocabulary of accepted easing tokens that every component must reference. Rather than hardcoding raw cubic-bezier values throughout your codebase, you should abstract these into design tokens.

The standards document specifies:

• Accepted easing tokens – Named curves like ease-out-expo or ease-in-out-cubic that map to specific cubic-bezier coordinates
• Duration scales – Paired time values (e.g., fast: 150ms, normal: 250ms, slow: 400ms) that must align with specific easing families
• Spring configurations – For physics-based motion, standardized stiffness and damping values that replace traditional easing entirely

/* Standardized token usage */
.button {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.modal {
  transition: opacity var(--duration-normal) var(--ease-in-out-cubic);
}

The Audit-Driven Decision Order

The skills/improve-animations/AUDIT.md file provides a strict decision hierarchy for selecting curves and flags critical anti-patterns. When auditing animations, the decision order follows this priority:

1. Motion intent – Determine if the element is entering, exiting, or updating
2. Physics model – Decide between standard easing or spring physics
3. Asymmetry check – Ensure the curve matches the direction of user attention

Critical finding: The audit explicitly flags ease-in (slow start, fast end) as a guaranteed finding when applied to UI elements. This curve creates the sensation of lag or resistance upon interaction, violating the principle of responsive feedback. Instead, favor ease-out variants for entrances and ease-in-out for symmetric state changes.

Precision Vocabulary for Curve Discussion

Effective animation requires precise communication between designers and engineers. The skills/animation-vocabulary/SKILL.md defines essential terms that eliminate ambiguity:

• Cubic-bezier – A mathematical curve defined by four control points (P0, P1, P2, P3) that calculates the acceleration rate between two values
• Asymmetric easing – Curves where the acceleration and deceleration phases have different characteristics, mimicking real-world physics where objects slow down faster than they speed up
• Exit velocity – The speed at which an element leaves the viewport, which should typically be faster than entrance to maintain interface responsiveness

Using this vocabulary ensures that when a reviewer references cubic-bezier(0.16, 1, 0.3, 1), the team understands it represents an asymmetric ease-out with minimal initial drag and strong deceleration.

Summary

• Avoid CSS defaults: The emil-design-eng skill explicitly rejects built-in CSS easings as insufficient for modern UI.
• Tokenize your curves: Reference skills/review-animations/STANDARDS.md to implement standardized easing tokens and duration scales.
• Audit against ease-in: The improve-animations/AUDIT.md treats ease-in on interactive elements as a critical violation.
• Learn the vocabulary: Use terms from skills/animation-vocabulary/SKILL.md like "asymmetric easing" and "cubic-bezier" to communicate precisely.
• Prioritize exit velocity: Elements should generally exit faster than they enter to keep the interface feeling responsive.

Frequently Asked Questions

Why is ease-in considered bad for UI animations?

According to skills/improve-animations/AUDIT.md, ease-in creates a slow start that feels like interface lag to users. When a user clicks a button or opens a menu, they expect immediate feedback. ease-in delays that initial response, making the application feel unresponsive. The audit flags this as a guaranteed finding because it violates the principle of responsive feedback that should occur within 100ms of interaction.

What makes a cubic-bezier curve "asymmetric"?

As documented in skills/animation-vocabulary/SKILL.md, asymmetric easing refers to curves where the acceleration and deceleration phases have different timing characteristics—typically a slow start with a fast snap (asymmetric ease-out) or a fast start with a gentle landing (asymmetric ease-in). This mirrors real-world physics where objects require more energy to start moving than to stop, creating motion that feels organic rather than robotic.

Should I use spring physics or cubic-bezier curves?

The skills/review-animations/STANDARDS.md suggests different contexts for each. Use spring configs for physically plausible interactions like dragging, bouncing, or scaling that should feel weight-based. Use cubic-bezier curves for deterministic timing where you need exact duration control, such as page transitions or button hovers. Springs are interruption-friendly but less predictable in duration, while beziers offer precise millisecond control.

How do I enforce these easing standards across my team?

Implement the token system from skills/review-animations/STANDARDS.md by creating platform-specific variables (CSS custom properties, JavaScript constants, or Swift/Android equivalents) that developers must import. Then use the audit checklist from skills/improve-animations/AUDIT.md in your code review process, specifically checking that no raw ease-in values appear on interactive elements and that all animations reference the standardized token library rather than arbitrary cubic-bezier values.

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