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

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 and encodes a simple principle: animation should serve a purpose, not just look cool 【ref】.

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 lines 5-13, with additional reinforcement that keyboard-initiated actions should never animate 【ref】.

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.

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

// 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.

.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.

.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 lines 29-35: --ease-out, --ease-in-out, and --ease-spring. These outperform CSS defaults with crisper acceleration profiles 【ref】.

Rare / First-Time: Delight Permitted

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

@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	Defines the frequency-based decision matrix, easing tokens, duration guidelines, and performance rules	STANDARDS.md
skills/review-animations/SKILL.md	Demonstrates applying standards during component review	SKILL.md
skills/animate/SKILL.md	Contains decision-gate automation logic mapping frequency tier to implementation	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】. 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: --ease-out for exits, --ease-in-out for symmetric transitions, and --ease-spring for bouncy effects 【ref】. 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 automates this tier-to-implementation mapping.

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