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

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, 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:

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:

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

The 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:

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 demonstrates a long-press confirm using clip-path animation (/skills/find-animation-opportunities/SKILL.md#L75):

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

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, improve-animations/AUDIT.md, review-animations/STANDARDS.md, and 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 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 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 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.

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