When to Avoid Animating UI Elements Based on Frequency: A Complete Guide

Avoid animating UI elements that users trigger more than 100 times per day, as high-frequency animations introduce perceived latency, strain the GPU compositor, and distract from task completion.

The emilkowalski/skills repository establishes strict animation standards that prioritize performance over visual polish for repeated interactions. According to the source code in skills/review-animations/STANDARDS.md, frequency-based rules determine whether an animation enhances or degrades the user experience.

The Frequency-Based Animation Thresholds

The repository defines four distinct frequency tiers that dictate animation strategy. These guidelines appear in STANDARDS.md lines 9-12 and are enforced as block-level findings in the review-animations skill.

100+ Times Per Day: Never Animate

Interactions occurring 100 or more times daily—such as keyboard shortcuts, command-palette toggles, and rapid menu navigation—must never include animations. The skills/review-animations/SKILL.md document flags any animation on "keyboard/high-frequency actions" as a block-level finding (lines 25-27).

These actions are typically keyboard-initiated and require instantaneous state changes. Adding even a 200ms transition forces users to wait for the visual completion before continuing their workflow.

Tens of Times Per Day: Reduce or Remove

For interactions occurring tens of times daily—including hover effects and list navigation—you should either remove the animation entirely or drastically reduce its scope. The remediation hierarchy in SKILL.md (lines 66-69) recommends shrinking duration and limiting properties to GPU-friendly transforms rather than keeping full transitions.

Occasional and Rare Interactions

Standard animations are appropriate for occasional triggers like modals, drawers, and toast notifications. Delightful animations are reserved exclusively for rare or first-time events, such as onboarding flows and celebration moments, where the novelty justifies the temporal cost.

Why High-Frequency Animations Harm UX

The architectural reasoning behind these rules centers on three technical constraints that directly impact user perception.

Performance Impact on the Compositor

UI animations should remain under 300ms and animate only GPU-friendly properties (transform, opacity). Repeating animations hundreds of times daily stresses the compositor and risks frame drops. The skills/animate/RECIPES.md file provides specific easing curves and duration tables for when animations are appropriate, but emphasizes that high-frequency components must bypass these entirely.

Perceived Latency in Keyboard-Initiated Actions

Fast, repeated actions need immediate feedback. When a user opens a dropdown via keyboard shortcut, watching the element animate into position creates the sensation that the interface is lagging behind their input. The source code explicitly references Raycast as a model that deliberately omits open/close animations for heavily used panels (STANDARDS.md line 14).

Consistency with Professional Tools

High-frequency components—menus, toggles, and command palettes—benefit from instantaneous state changes that mirror professional development tools. This consistency reduces cognitive load for power users who rely on rapid, muscle-memory interactions.

Implementation Guidelines from the Source Code

The repository provides specific files that govern how to audit and remediate frequency violations.

Reviewing Against STANDARDS.md

The skills/review-animations/STANDARDS.md file contains the canonical frequency table. When auditing code, check if the component handles keyboard shortcuts or rapid toggles. If the interaction appears in the "100+ times" category, the animation must be deleted entirely according to the remediation hierarchy.

Following the Remediation Hierarchy

SKILL.md establishes a strict order for fixing violations:

1. Delete the animation for high-frequency actions
2. Reduce duration and scope for medium-frequency actions
3. Verify prefers-reduced-motion compliance for all remaining animations

The skills/improve-animations/AUDIT.md document provides checklists for identifying existing frequency-related violations in legacy codebases.

Practical Code Examples

Removing Animation from Keyboard-Triggered Panels

For components toggled via hotkeys, eliminate CSS transitions entirely:

// Example: a panel that opens via a hotkey
function Panel({ isOpen }) {
  // No CSS transition for high‑frequency toggle
  return (
    <div
      className={isOpen ? "panel open" : "panel"}
      role="dialog"
      aria-modal="true"
    />
  );
}

/* CSS – no transition on the .panel */
.panel {
  opacity: 0;
  visibility: hidden;
}
.panel.open {
  opacity: 1;
  visibility: visible;
}

Reducing Animation for Medium-Frequency Hover Effects

When you cannot remove an animation entirely, optimize it for the GPU and shorten the duration:

/* Original (too much) */
.button {
  transition: all 300ms ease;
}

/* Revised – target only transform/opacity, shorten duration */
.button {
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
.button:hover {
  transform: scale(0.97);
  opacity: 0.9;
}

Conditional Animation Based on Frequency Tier

Use a utility function to disable animations programmatically for high-frequency actions:

// A small utility that disables animation for high‑frequency actions
const HIGH_FREQ = new Set(["togglePanel", "commandPalette"]);

function useMotion(id, animation) {
  // If the action belongs to the high‑frequency set, skip animation
  return HIGH_FREQ.has(id) ? {} : animation;
}

// Usage
<motion.div {...useMotion("togglePanel", { opacity: [0, 1] })} />

Respecting Reduced Motion Preferences

Always wrap frequency-based decisions within accessibility constraints:

@media (prefers-reduced-motion: reduce) {
  /* Collapse all non‑essential animations, regardless of frequency */
  .button,
  .dropdown,
  .toast {
    transition: none;
  }
}

Summary

• Delete animations entirely for UI elements triggered 100+ times daily, such as keyboard shortcuts and command palettes.
• Reduce duration and scope for interactions occurring tens of times daily, limiting transitions to 120ms and GPU-friendly properties.
• Reference STANDARDS.md in the emilkowalski/skills repository for the canonical frequency table and architectural rationale.
• Follow the remediation hierarchy in SKILL.md: removal first, reduction second, accessibility compliance always.
• Maintain instantaneous feedback for keyboard-initiated actions to prevent perceived latency and support power-user workflows.

Frequently Asked Questions

What counts as a high-frequency UI interaction?

High-frequency interactions include any action a user performs 100 or more times per day, such as toggling panels with keyboard shortcuts, navigating command palettes, or switching between tabs. According to STANDARDS.md, these are typically "keyboard-initiated" actions where animation adds unnecessary latency. Occasional actions like opening settings or viewing error toasts fall into lower frequency tiers where standard animations are acceptable.

How do I audit existing animations for frequency violations?

Use the checklist in skills/improve-animations/AUDIT.md to identify components handling rapid interactions. Check event logs or analytics to determine daily usage counts. Any component processing keyboard shortcuts or rapid toggles should have its animations flagged for removal. The review-animations skill automatically flags these as block-level findings when it detects animation on high-frequency actions.

Should I ever use animation for keyboard shortcuts?

No. The source code explicitly prohibits animation for keyboard shortcuts and other 100+ times daily triggers. Even micro-interactions like subtle fades create cumulative delays that make the interface feel sluggish. The recommended approach is instantaneous state changes, mirroring tools like Raycast that omit open/close animations for heavily used panels to maintain responsiveness.

How does prefers-reduced-motion interact with frequency rules?

The prefers-reduced-motion media query overrides all frequency-based decisions. Even if an animation is appropriate for an occasional interaction, you must disable it when users have requested reduced motion. The frequency rules provide an additional optimization layer: while reduced-motion removes animations for accessibility, frequency rules remove them for performance and UX efficiency. Implement both checks to ensure compliance with SKILL.md guidelines.

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