# How to Choose Easing Functions for Different UI Animation Scenarios

> Learn how to choose the right easing functions for UI animations. Discover custom cubic bezier curves asymmetric easing and when to avoid ease-in for optimal user experience.

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

---

**Use custom cubic-bezier curves as your default instead of built-in CSS easings, apply asymmetric easing for enter/exit states, and strictly avoid `ease-in` for UI elements that require immediate feedback.**

Choosing the right easing for different UI animation scenarios directly impacts perceived performance and user trust. The `emilkowalski/skills` repository treats easing as a first-class design decision rather than a cosmetic afterthought, providing concrete standards through skill-based markdown files that document audit rules, token systems, and precise vocabulary for animation curves.

## Why Built-in CSS Easings Are Insufficient

According to [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), standard CSS easings like `ease`, `ease-in`, and `ease-out` are considered "too weak" for professional interface design. The repository argues that these defaults lack the character and responsiveness required for modern applications, recommending instead that teams adopt **custom cubic-bezier curves** as the baseline for all motion design.

This approach allows for **asymmetric easing**—where enter animations use a different curve than exit animations—creating more natural physical metaphors. For example, elements entering the viewport might decelerate quickly (fast start, slow end), while exiting elements accelerate away (slow start, fast end).

## The Standardized Token System

The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) file establishes a canonical list of **easing tokens**, **duration scales**, and **spring configurations** that every component must reference. Rather than hardcoding cubic-bezier values inline, the repository mandates using semantic tokens that describe the motion's purpose.

Key token categories include:

- **Enter easings** – Quick, responsive curves for elements appearing on screen
- **Exit easings** – Decisive curves that respect user attention when dismissing content
- **Spring configs** – Physics-based parameters for continuous motion or draggable interfaces
- **Duration scales** – Time values paired with specific easing curves to maintain rhythm

This system ensures that [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) serves as the single source of truth, preventing drift between components and maintaining consistent physics across the application.

## Audit Rules for Easing Selection

The [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md) file provides a decision tree for selecting easing functions and explicitly flags `ease-in` as a **guaranteed finding** when used on UI elements. This rule exists because `ease-in` (slow start, fast end) creates the perception of lag or unresponsiveness—an unacceptable experience for buttons, menus, or toggles.

The audit checklist follows this priority order:

1. **Identify interaction type** – Is this a state change, entrance, exit, or continuous motion?
2. **Select curve family** – Cubic-bezier for discrete animations, springs for physical interactions
3. **Check for anti-patterns** – Reject `ease-in` for user-triggered UI; flag built-in CSS easings for replacement
4. **Validate against tokens** – Ensure the curve exists in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)

## Defining Animation Vocabulary

Precision in communication requires precise terms, which is why [`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md) establishes standardized definitions for discussing curves. Key terms include:

- **Cubic-bezier** – A mathematical curve defined by four control points, allowing infinite customization of acceleration profiles
- **Asymmetric easing** – Using different curves for the forward and reverse directions of a transition
- **Spring damping** – The friction coefficient in spring physics that determines how quickly oscillation settles

This vocabulary prevents ambiguous requests like "make it smoother" and instead enables specific directives like "increase the damping ratio in the spring config" or "use an asymmetric cubic-bezier for the exit state."

## Practical Implementation Patterns

When implementing these standards, reference the tokens directly in your animation code. For CSS-based animations, map the semantic tokens to custom properties:

```css
:root {
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.button-enter {
  animation: slideIn 300ms var(--ease-enter) forwards;
}

```

For JavaScript-based spring animations, import the configurations defined in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md):

```javascript
import { springConfigs } from './animation-standards';

// Use for drag gestures or layout animations
const responsiveSpring = springConfigs.snappy;
const gentleSpring = springConfigs.smooth;

```

## Summary

- **Replace CSS defaults** with custom cubic-bezier curves as specified in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md)
- **Reference standardized tokens** from [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) instead of hardcoding values
- **Avoid `ease-in`** for all UI feedback animations according to [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md)
- **Apply asymmetric easing** to distinguish between enter and exit states
- **Use spring configurations** for continuous or physics-based interactions rather than bezier curves

## Frequently Asked Questions

### What makes cubic-bezier curves better than CSS defaults?

Cubic-bezier curves provide infinite granularity in controlling acceleration and deceleration, whereas CSS defaults like `ease` or `ease-in-out` follow fixed mathematical patterns that often feel mechanical or slow. The [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) file specifically notes that custom curves allow for the "snappy" feel required in high-quality interfaces.

### Why is `ease-in` flagged as a problem in UI animations?

The [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md) identifies `ease-in` (slow start, fast end) as problematic because it creates perceived latency—users see a delay between their action and the system's response. For interactive elements like buttons or drawers, this lag destroys the illusion of direct manipulation and feels unresponsive.

### How do spring configurations differ from bezier curves?

While cubic-bezier curves define a fixed mathematical path between two states, spring configurations simulate physical physics with mass, stiffness, and damping parameters. According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), springs are preferred for continuous motion (like drag gestures) or when you need interruptible animations that can adapt to changing velocity mid-flight.

### Where should easing tokens be defined in a project?

The `emilkowalski/skills` repository recommends centralizing all easing definitions in a single standards file (referenced as [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)) and exposing them as semantic tokens. This prevents developers from inventing one-off easings and ensures that every component references the same physical constants, maintaining consistency across the application.