# How Frequency of Use Should Drive Animation Decisions in UI Development

> Learn how frequency of use should drive UI animation decisions. Prioritize user experience by animating only less frequent interactions and keeping high-frequency ones unanimated.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: best-practices
- Published: 2026-07-29

---

**High-frequency interactions—such as keyboard shortcuts triggered 100 or more times daily—should never animate, while rare or first-time experiences can justify richer motion up to 300 milliseconds.**

The **emilkowalski/skills** repository codifies a design-engineering philosophy that dictates exactly **how frequency of use should drive animation decisions** across a codebase. According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), mapping usage frequency to motion intensity prevents cognitive fatigue while preserving accessibility and perceived performance.

## The Frequency-to-Animation Mapping Matrix

The repository defines three distinct frequency bands that determine animation allowances:

- **100+ times per day** (keyboard shortcuts, command-palette toggles): **No animation.** Never apply motion to keyboard-initiated actions because repetition creates perceived latency and disconnects the user from immediate feedback.

- **Tens per day** (modals, drawers, toasts): **Standard animation.** Use modest fades, slides, or scale-ups strictly under 300ms to maintain flow without distraction.

- **Rare or first-time** (guided tours, onboarding, prototype pickers): **Delightful animation.** Apply richer motion with easing curves or spring physics that afford a higher visual budget due to low repetition.

## Why Frequency Determines Animation Strategy

### Performance Perception

Fast, repetitive actions benefit from instant state changes. In [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), the repository emphasizes that animation adds perceived latency to high-frequency controls, making the interface feel sluggish regardless of actual frame rates.

### Cognitive Load

Constant motion on heavily used controls distracts users from their task. The standards prioritize reducing extraneous visual noise for actions users perform habitually, reserving cognitive attention for content rather than chrome.

### Consistency

Aligning motion with usage creates predictable behavior. A UI that sometimes animates a keyboard shortcut and sometimes does not—depending on context—feels broken and erodes trust in the interface's reliability.

### Accessibility

The repository enforces `prefers-reduced-motion` handling universally. As noted in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) (lines 9-14), even when reduced motion is requested, the frequency rule remains absolute: high-frequency interactions receive no animation regardless of user preference settings.

## Policy-Driven Enforcement in the Skills Repository

The **emilkowalski/skills** repository implements an automated pipeline that encodes these frequency rules into review and audit workflows:

**Rule Definition** – [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) centralizes the frequency matrix and establishes hard constraints (e.g., line 176 mandates reduced-motion media queries alongside frequency rules).

**Review Skill** – The `review-animations` skill reads these standards and flags violations during code review. According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 23-25), any animation detected on keyboard-initiated actions generates a critical finding.

**Audit Skill** – `improve-animations` scans the entire codebase for `transition`, `animation`, and `@keyframes` declarations. As documented in [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md) (lines 11-16), it recommends removal or duration reduction where high-frequency usage is detected.

**Opportunity Finder** – `find-animation-opportunities` strictly limits proposals to low-frequency contexts. Per [`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md) (lines 31-36), the skill explicitly rejects animation suggestions for high-frequency interactions, ensuring motion is only added when usage data justifies the visual overhead.

## Practical Implementation Examples

The following CSS and JavaScript patterns demonstrate how to apply frequency-based animation rules in production code.

```css
/* High-frequency toolbar toggle: zero animation */
.toolbar-toggle {
  /* No transition or animation properties */
  background-color: transparent;
}

/* Occasional modal: standard sub-300ms animation */
.modal {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeIn 250ms ease-out forwards;
}

/* Low-frequency prototype picker: conditional entrance */
.proto-picker-item {
  animation: slideIn 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Accessibility override: always respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .proto-picker-item {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

```

```javascript
// JavaScript frequency guard for tooltip animation
let tooltipSeen = false;

function showTooltip(element) {
  if (tooltipSeen) {
    // High frequency: skip animation after first view
    element.classList.add('tooltip-instant');
  } else {
    // First occurrence: allow standard animation
    element.classList.add('tooltip-with-delay');
    tooltipSeen = true;
  }
}

```

These examples align with the repository's guidelines: the toolbar toggle (high-frequency) omits transition properties entirely, the modal (occasional) uses a 250ms fade, and the prototype picker (low-frequency) implements conditional replay logic as seen in [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) (lines 138-141).

## Summary

- **High-frequency actions (100+/day)** receive instant feedback with zero animation to eliminate perceived latency and cognitive overhead.
- **Moderate-frequency actions (tens/day)** use standard animations capped at 300ms with simple easing curves.
- **Rare interactions** justify delightful, complex motion including springs and extended durations.
- The **emilkowalski/skills** repository enforces these rules through automated review (`review-animations`), codebase auditing (`improve-animations`), and constrained opportunity detection (`find-animation-opportunities`).
- Always implement `prefers-reduced-motion` checks, but maintain frequency-based animation restrictions regardless of user preference.

## Frequently Asked Questions

### When should UI animations be disabled entirely?

Animations should be completely disabled for actions users perform 100 or more times per day, such as keyboard shortcuts, command-palette toggles, or rapid-fire toolbar buttons. According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), these high-frequency interactions require instant state changes to prevent perceived latency and maintain fluid workflow.

### What is the maximum recommended duration for standard UI animations?

For occasional interactions—those occurring tens of times per day—the repository mandates animations remain **under 300 milliseconds**. This threshold, documented in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), balances visual orientation with task efficiency, preventing motion from becoming a barrier to productivity.

### How does the repository enforce animation standards programmatically?

The **emilkowalski/skills** repository operates a policy-driven pipeline: [`review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/SKILL.md) (lines 23-25) flags violations during code review, [`improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/AUDIT.md) (lines 11-16) scans for disallowed transitions, and [`find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/find-animation-opportunities/SKILL.md) (lines 31-36) restricts suggestions to low-frequency contexts only. This ensures frequency rules are validated at multiple stages of the development lifecycle.

### Does the frequency rule apply if the user has reduced motion preferences?

Yes. As specified in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) (lines 9-14), high-frequency actions must have **no animation even when `prefers-reduced-motion` is active**. While reduced-motion settings disable animation for lower-frequency interactions, they do not override the instant-feedback requirement for keyboard shortcuts or other 100+/day actions. The rule is usage-dependent, not preference-dependent.