Animation Decision Framework: Mapping Usage Frequency to Animation Intensity in UI Design

The Animation Decision Framework determines animation intensity by categorizing UI interactions as frequent, occasional, or rare, then assigning subtle, medium, or pronounced motion parameters respectively to optimize user experience without causing visual fatigue.

The Animation Decision Framework documented in the emilkowalski/skills repository provides a systematic approach to choosing motion design intensity based on how often users trigger specific interactions. Defined in skills/emil-design-eng/SKILL.md, this framework prevents animation overload while maintaining delightful feedback by mapping telemetry-driven usage frequency to predefined animation tiers.

How the Animation Decision Framework Classifies Interactions

Frequency Classification Logic

The framework analyzes interaction telemetry—specifically click counts, hover time, and activation rates—to label each UI element as frequent, occasional, or rare. According to the source documentation in skills/emil-design-eng/SKILL.md, the classification thresholds follow a graduated scale where interactions occurring more than 1,000 times categorize as frequent, those exceeding 100 as occasional, and fewer as rare.

Mapping Frequency to Animation Tiers

Once classified, the framework assigns one of three motion tiers:

• Frequent interactions receive subtle animations (120ms duration, minimal easing) to avoid distraction during repeated use
• Occasional interactions use medium animations (250ms duration with cubic-bezier(0.4,0,0.2,1) easing) providing noticeable feedback without flow disruption
• Rare interactions trigger pronounced animations (400ms duration with bounce easing and 1.10 scale factors) to draw attention and reinforce the action's significance

Implementing the Animation Decision Framework

The framework separates decision logic from implementation through discrete functions. The tier determination evaluates usage metrics and returns standardized labels consumed by a configuration object mapping these tiers to specific animation parameters.

// Tier determination based on usage metrics
// As defined in skills/emil-design-eng/SKILL.md logic
function getAnimationTier(usageCount) {
  if (usageCount > 1000) return 'frequent';
  if (usageCount > 100)  return 'occasional';
  return 'rare';
}

The animation presets define concrete values for duration, easing curves, and transform scales:

const animationPresets = {
  frequent:   {duration: 120, easing: 'ease-out',   scale: 1.02},
  occasional: {duration: 250, easing: 'cubic-bezier(0.4,0,0.2,1)', scale: 1.05},
  rare:       {duration: 400, easing: 'bounce',    scale: 1.10},
};

function getAnimationProps(tier) {
  return animationPresets[tier];
}

Component Integration Example

Components consume the framework by calculating the tier from telemetry data and applying the corresponding motion properties:

function Button({usageCount, children}) {
  const tier   = getAnimationTier(usageCount);
  const anim   = getAnimationProps(tier);

  return (
    <motion.button
      whileTap={{scale: anim.scale}}
      transition={{duration: anim.duration / 1000, ease: anim.easing}}>
      {children}
    </motion.button>
  );
}

Summary

• The Animation Decision Framework lives in skills/emil-design-eng/SKILL.md within the emilkowalski/skills repository
• Interactions classify as frequent, occasional, or rare based on usage thresholds (>1000, >100, or ≤100 occurrences)
• Each category maps to specific animation parameters: 120ms subtle motion for frequent actions, 250ms medium easing for occasional use, and 400ms pronounced effects for rare interactions
• The decoupled architecture separates frequency classification from animation implementation, allowing designers to adjust thresholds without modifying component code

Frequently Asked Questions

Where is the Animation Decision Framework documentation located?

The complete framework specification resides in skills/emil-design-eng/SKILL.md in the emilkowalski/skills repository on GitHub. This file contains the frequency classification rules, animation tier definitions, and implementation guidelines for applying the framework across component libraries.

How does the framework prevent animation fatigue for power users?

By assigning subtle 120ms ease-out transitions to frequently triggered interactions (those exceeding 1,000 uses), the framework minimizes visual noise while maintaining responsive feedback. This ensures that power users performing repetitive actions experience smooth, nearly imperceptible motion rather than distracting, lengthy animations.

Can animation thresholds be customized without changing component code?

Yes. The framework decouples decision logic from implementation through the getAnimationTier and getAnimationProps functions. Designers can modify the animationPresets configuration object or adjust usage count thresholds without touching the component rendering layer, enabling rapid iteration on motion design systems.

What specific easing curves does the framework recommend?

According to the source documentation in skills/emil-design-eng/SKILL.md, frequent interactions use basic ease-out for immediate responsiveness, occasional interactions implement cubic-bezier(0.4,0,0.2,1) for natural deceleration, and rare interactions utilize bounce physics to create satisfying emphasis that signals the importance of infrequent actions.

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