# Frequency-Based Decision Matrix for UI Animations: A Practical Guide

> Learn the frequency-based decision matrix for UI animations. Classify interactions into tiers to optimize animation use from never animate to adding delight.

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

---

**The frequency-based decision matrix for UI animations classifies interactions into four tiers—100+ times/day, tens/day, occasional, and rare/first-time—each with specific animation rules ranging from "never animate" to "can add delight."**

The `emilkowalski/skills` repository defines this framework in its **Animation Standards Reference** to help developers decide when motion enhances or harms user experience. The matrix lives in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) and encodes a simple principle: **animation should serve a purpose, not just look cool** [【ref】](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#L5-L13).

## The Four Frequency Tiers

The frequency-based decision matrix splits UI interactions by how often users trigger them. Each tier carries a concrete animation rule designed to respect user rhythm and cognitive load.

| Frequency tier | Typical examples | Decision |
|:---|:---|:---|
| **100+ times/day** | Keyboard shortcuts, command-palette toggles, hotkeys | **Never animate.** Motion makes constantly-used UI feel sluggish. |
| **Tens times/day** | Hover effects, list navigation, tab switches | **Remove or drastically reduce animation.** Subtle feedback only. |
| **Occasional** | Modals, drawers, toasts, dropdowns | **Standard animation.** Use default easing and duration guidelines. |
| **Rare / first-time** | Onboarding, celebratory feedback, achievement states | **Can add delight.** Expressive motion creates memorable experiences. |

This structure appears in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) lines 5-13, with additional reinforcement that *keyboard-initiated actions should never animate* [【ref】](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#L14-L15).

## Why Frequency Determines Animation

High-frequency actions embed in **muscle memory**. When a developer toggles the command palette 200 times daily, any 200ms fade-in adds 40 seconds of waiting per day—pure friction disguised as polish. The frequency-based decision matrix treats this as a **performance penalty**, not a feature.

Conversely, rare events break routine. A first-time onboarding completion or achievement unlock has the user's full attention. Here, deliberate animation reinforces **positive emotional association** without disrupting workflow rhythm.

## Implementing the Matrix in Code

The following patterns map each tier to concrete CSS and JavaScript implementations.

### High-Frequency: Zero Animation

For keyboard shortcuts and hotkeys, eliminate transitions entirely.

```css
/* skills/review-animations/STANDARDS.md guidance */
.command-palette,
.hotkey-toggle {
  /* No transition or animation properties */
  opacity: 1;
  transform: none;
}

```

```javascript
// React hook: instant state change for high-frequency action
useEffect(() => {
  const togglePalette = () => setOpen(prev => !prev);
  window.addEventListener('keydown', togglePalette);
  return () => window.removeEventListener('keydown', togglePalette);
}, []);

```

No `transition-delay`, no `animation` property, no `requestAnimationFrame` interpolation. The state change must appear instantaneous.

### Medium-Frequency: Drastically Reduced

Hover effects and minor navigation affordances tolerate minimal motion—shorter duration, simpler easing.

```css
.list-item:hover {
  transform: translateX(4px);
  transition: transform 80ms ease-out;
  /* Typical duration 200-300ms reduced to <100ms */
}

```

The 80ms threshold keeps feedback perceptible without creating a "swimming" feel during rapid cursor movement.

### Low-Frequency: Standard Animation

Modals, drawers, and toasts follow the repository's **default easing and duration tokens**.

```css
.modal-overlay {
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.modal-content {
  transform: translateY(16px);
  transition: transform 200ms var(--ease-out);
}

.modal[data-open] .modal-overlay,
.modal[data-open] .modal-content {
  opacity: 1;
  transform: translateY(0);
}

```

Use the custom easing curves defined in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) lines 29-35: `--ease-out`, `--ease-in-out`, and `--ease-spring`. These outperform CSS defaults with crisper acceleration profiles [【ref】](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#L29-L35).

### Rare / First-Time: Delight Permitted

Onboarding completions, achievement unlocks, and celebratory states allow expressive motion.

```css
@keyframes celebration-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.achievement-badge {
  animation: celebration-pop 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

```

Longer durations (600-1000ms) and bouncy easing become appropriate because the user encounters this motion infrequently and has attention available to appreciate it.

## Key Files in the Repository

| File | Purpose | Location |
|:---|:---|:---|
| [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) | Defines the frequency-based decision matrix, easing tokens, duration guidelines, and performance rules | [STANDARDS.md](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) |
| [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) | Demonstrates applying standards during component review | [SKILL.md](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) |
| [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) | Contains decision-gate automation logic mapping frequency tier to implementation | [SKILL.md](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) |

## Summary

- The **frequency-based decision matrix** divides UI animations into four tiers based on interaction count: 100+/day, tens/day, occasional, and rare/first-time.
- **High-frequency keyboard actions never animate**—motion creates perceived lag in workflows that rely on speed.
- **Medium-frequency interactions use drastically reduced animation**—subtle feedback under 100ms only.
- **Low-frequency modal interactions apply standard animation** with repository-defined easing and duration tokens.
- **Rare or first-time events permit delight-focused motion**—longer durations and expressive easing create positive emotional impact.

## Frequently Asked Questions

### How do I determine which frequency tier an interaction belongs to?

Analyze **real usage data or realistic estimates**. Keyboard shortcuts used by power users easily exceed 100 daily triggers. Modal dialogs opened a few times per session fall into "occasional." Onboarding flows and celebratory states are inherently "rare." When uncertain, bias toward the stricter tier—users rarely complain about *missing* animation they didn't expect.

### Can I override the "never animate" rule for high-frequency actions?

The `emilkowalski/skills` standards explicitly discourage this. The repository states that **keyboard-initiated actions should never animate** [【ref】](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#L14-L15). If you believe motion adds necessary affordance, reduce the action's frequency first—perhaps by consolidating shortcuts or changing the interaction model—rather than adding animation.

### What easing curves does the repository recommend?

The standards define custom CSS properties in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md): `--ease-out` for exits, `--ease-in-out` for symmetric transitions, and `--ease-spring` for bouncy effects [【ref】](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md#L29-L35). These use cubic-bezier values tuned for crisp, modern motion that outperforms browser defaults like `ease` or `ease-in-out`.

### How does this matrix apply to animation libraries like Framer Motion?

The frequency-based decision matrix translates directly—set `transition: { duration: 0 }` for high-frequency actions, constrain to `duration: 0.08` for medium-frequency, use `duration: 0.2` with repository easing for low-frequency, and allow `duration: 0.6-1.0` with spring physics for rare events. The logic in [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) automates this tier-to-implementation mapping.