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

> Discover how the Animation Decision Framework maps UI usage frequency to animation intensity. Optimize user experience with subtle, medium, or pronounced motion.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: deep-dive
- Published: 2026-08-02

---

**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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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.

```javascript
// 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:

```javascript
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:

```tsx
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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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.