# When to Use Asymmetric Enter/Exit Animation Timing: A Complete Guide > Master asymmetric enter/exit animation timing. Discover when to use it for deliberate actions, providing slow visual feedback during decisions and instant feedback upon completion. - Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills) - Tags: how-to-guide - Published: 2026-08-03 --- **Use asymmetric enter/exit animation timing when the user performs a deliberate action—such as pressing a button or holding a control—that requires slow visual feedback during the decision phase and instantaneous feedback once the action completes.** The `emilkowalski/skills` repository establishes strict animation standards through its *review-animations* skill, prescribing asymmetric timing as a non-negotiable pattern for deliberate interactions. By separating the user-initiated phase (slow, intentional) from the system response phase (fast, snappy), designers create interfaces that feel responsive yet psychologically substantial. ## The Core Principle: Deliberate vs. System Response According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 39-40), asymmetric timing applies specifically to interactions where the user performs a deliberate action. The architecture defines two distinct phases: - **Deliberate phase** – When the user presses, holds, or activates a control, the UI animates slowly to confirm their intent has registered. This creates psychological weight and prevents accidental triggers. - **System response phase** – When the user releases or completes the action, the UI must snap back or transition rapidly to signal that processing is complete. Applying **symmetric timing** (equal duration for both phases) to press-and-release interactions is explicitly flagged as a finding and regression in the source standards. ## The Philosophy Behind the Timing The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) file (lines 101-108) encapsulates the logic: **"Slow where the user is deciding, fast where the system responds."** This philosophy acknowledges that users need time to confirm their intention during input, but demand immediate feedback when finishing. ### Why Speed Matters on Exit Rapid exit animations improve perceived performance. When a user releases a button, they expect the system to react immediately. A slow exit creates the impression of lag or unresponsiveness, even if the actual processing is instant. ## Implementation Examples The repository provides concrete implementations across three technologies to demonstrate the pattern. ### CSS Asymmetric Timing For a button overlay pattern, CSS transitions handle the phase separation through the `:active` pseudo-class: ```css /* Fast system response – exit */ .overlay { transition: clip-path 200ms ease-out; } /* Slow deliberate phase – press */ .button:active .overlay { transition: clip-path 2s linear; } ``` The exit transition uses 200ms with `ease-out` (responsive), while the press state uses 2s `linear` (deliberate). ### Web Animations API (WAAPI) In JavaScript, the asymmetry is controlled via duration and easing parameters: ```js // Fast exit animation (system response) element.animate( [{ clipPath: 'inset(0 0 0 0)' }, { clipPath: 'inset(0 0 100% 0)' }], { duration: 200, easing: 'cubic-bezier(0.23,1,0.32,1)' } ); // Slow press animation (deliberate) element.animate( [{ clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0 0 0 0)' }], { duration: 2000, easing: 'linear' } ); ``` ### React with Framer Motion For component-based architectures, conditional transition properties handle the asymmetry: ```tsx ``` ## Supporting Principles from the Standards Asymmetric timing operates within four broader tenets defined in the repository: 1. **Justified Motion** – Every animation must serve a functional purpose beyond aesthetics. 2. **Frequency-Appropriate** – High-frequency actions (keyboard shortcuts) receive no animation; occasional actions can use richer motion. 3. **Responsive Easing** – Use `ease-out` for entering/exiting to feel fast; avoid `ease-in` which delays visual feedback. 4. **Interruptibility** – Transitions must be interruptible; keyframes that restart from zero are discouraged for rapid UI feedback. ## Summary - Asymmetric enter/exit animation timing is required when users perform deliberate actions like pressing and holding controls. - The **enter phase** should be slow (around 2s) to confirm user intent and prevent accidental triggers. - The **exit phase** should be fast (around 200ms) with `ease-out` easing to signal system responsiveness. - Symmetric timing on press-and-release interactions is considered a regression according to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md). - The implementation varies by technology but consistently separates deliberate (slow/linear) from response (fast/ease-out) phases. ## Frequently Asked Questions ### What exactly is asymmetric enter/exit animation timing? Asymmetric enter/exit animation timing refers to using different animation durations for the activation (enter) and deactivation (exit) states of an interactive element. Typically, the enter phase lasts significantly longer (e.g., 2 seconds) to accommodate user decision-making, while the exit phase completes rapidly (e.g., 200 milliseconds) to confirm system responsiveness. ### Why is symmetric timing considered a regression for press-and-hold interactions? According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 39-40), symmetric timing on press-and-release or hold interactions creates cognitive friction by delaying system feedback when the user expects immediacy. When a user releases a button, they need instant confirmation that the action completed; a slow exit animation mimics system lag and degrades the perceived performance of the interface. ### Which easing curve should I use for asymmetric animation phases? The [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) file recommends `ease-out` curves (such as `cubic-bezier(0.23,1,0.32,1)`) for fast exit phases to create a responsive feel. For the slow enter phase, `linear` easing is preferred to maintain steady, intentional progress without acceleration that might rush the user's decision time. ### Does asymmetric timing apply to all button interactions or only specific ones? Asymmetric timing specifically applies to **deliberate actions** where the user actively holds or presses a control. High-frequency interactions like keyboard shortcuts should use no animation at all, per the repository's frequency-appropriateness guidelines. Standard clicks that don't involve a sustained press state typically don't require this specific asymmetric treatment.