# Asymmetric Enter/Exit Timing: Deliberate Press Actions vs. System Response Animations

> Master asymmetric enter exit timing. Learn how to use deliberate press actions and system response animations to create a clear cause-effect hierarchy and improve user experience.

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

---

**Deliberate user-initiated press actions should animate slowly with eased transitions, while system responses should snap back instantly to create a perceptual hierarchy that reinforces cause-effect relationships.**

The `emilkowalski/skills` repository codifies a specific animation design pattern where **intentional user gestures** receive slower, more deliberate visual feedback, and **system-generated state changes** respond immediately. This asymmetric approach prevents UI sluggishness while ensuring users feel in control of their interactions.

---

## Why Asymmetric Timing Matters

The core principle addresses a fundamental tension in interactive design: users need confirmation that their input registered, but they also want the system to feel responsive.

- **Slow press feedback** (typically 100–160 ms with `ease-out`) signals that the system has recognized the user's intent.
- **Instant release/system response** prevents cumulative animation delays that make the interface feel unresponsive.
- **Symmetric timing** (identical enter/exit durations) is reserved only for simple press-and-release interactions where no additional confirmation is needed.

According to the repository's [`review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/SKILL.md), this pattern creates a clear "perceptual hierarchy" where the UI "gives the user ample visual feedback for the intentional gesture, then quickly acknowledges the result" (`/skills/review-animations/SKILL.md#L39`).

---

## Architectural Implementation

The pattern splits animations into two distinct phases with opposing characteristics.

### Phase 1: Press Feedback (Slow, Eased)

Applied on `:active` pseudo-class or `pointerdown` event with subtle scale reduction (≈0.97) and ~160 ms transition:

```css
button:active {
  transform: scale(0.97);
  transition: transform 160ms ease-out;
}

```

### Phase 2: Release/System Response (Instant Snap)

The return to default state uses no transition, creating an immediate snap:

```css
button {
  /* No transition property here = instant return on release */
}

```

The [`improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/AUDIT.md) explicitly flags missing asymmetric timing as a defect that should be corrected (`/skills/improve-animations/AUDIT.md#L67`).

---

## Concrete Timing Standards

The repository provides specific duration values in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md):

| Interaction Type | Duration | Easing |
|------------------|----------|--------|
| Button press feedback | 100–160 ms | `ease-out` |
| Destructive confirm release | 200 ms | `ease-out` |
| System state snap | 0 ms | none |

These values appear in `/skills/review-animations/STANDARDS.md#L43`, giving implementers concrete targets rather than abstract guidance.

---

## Advanced Pattern: Destructive Confirms

For high-stakes interactions like destructive actions, the asymmetric pattern scales proportionally while maintaining the same slow-enter/fast-exit ratio.

The [`find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/find-animation-opportunities/SKILL.md) demonstrates a long-press confirm using `clip-path` animation (`/skills/find-animation-opportunities/SKILL.md#L75`):

```css
/* Overlay starts hidden */
.button .overlay {
  clip-path: inset(0 100% 0 0);
}

/* Slow fill on press (2 seconds = deliberate hold requirement) */
.button:active .overlay {
  transition: clip-path 2s linear;
  clip-path: inset(0 0 0 0);
}

/* Quick snap back on release */
.button:not(:active) .overlay {
  transition: clip-path 200ms ease-out;
  clip-path: inset(0 100% 0 0);
}

```

This 10:1 timing ratio (2 s enter vs. 200 ms exit) preserves the asymmetric principle even at extended durations.

---

## JavaScript Implementation

For dynamic state management, the same pattern applies via event listeners:

```javascript
const btn = document.querySelector('button');

btn.addEventListener('pointerdown', () => {
  btn.style.transform = 'scale(0.97)';
  btn.style.transition = 'transform 160ms ease-out';
});

btn.addEventListener('pointerup', () => {
  btn.style.transform = '';
  // Intentionally no transition property = instant snap
});

```

The key implementation detail: **set transition properties only for the press state**. The release inherits no transition, causing immediate visual reset.

---

## Summary

- **Deliberate press actions** animate slowly (100–160 ms, eased) to confirm user intent.
- **System responses** snap instantly (0 ms) to maintain perceived responsiveness.
- **Asymmetric timing** is enforced across the codebase as a design standard, not a suggestion.
- **Destructive confirms** scale the ratio (e.g., 2 s : 200 ms) while preserving the same pattern.
- Key source files: [`review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/SKILL.md), [`improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/AUDIT.md), [`review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/STANDARDS.md), and [`find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/find-animation-opportunities/SKILL.md).

---

## Frequently Asked Questions

### When should I use symmetric timing instead of asymmetric?

Use symmetric timing only for simple press-and-release interactions where the user does not need extra confirmation of their action. According to the repository guidelines, most interactive elements benefit from asymmetric timing to reinforce the cause-effect relationship between user gesture and system response.

### What exact duration should I use for press feedback?

The [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) file specifies **100–160 ms** for standard button press feedback with `ease-out` easing. Destructive confirms use longer durations (up to 2 seconds) proportional to the action's severity, but always pair with faster exit animations.

### Does this pattern apply to non-button elements?

Yes. The asymmetric enter/exit principle applies to any deliberate user gesture including toggles, holds, and gestures. The [`emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/emil-design-eng/SKILL.md) file reinforces this as a general press-feedback rule across component types.

### How do I audit existing components for this pattern?

The [`improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/AUDIT.md) file provides a checklist that flags missing asymmetric timing as a defect. Review components for: (1) eased transition on press/active states, and (2) immediate or significantly faster return on release/system response.